前言:
而今我们对“h5 上传文件”都比较关切,姐妹们都需要剖析一些“h5 上传文件”的相关内容。那么小编在网络上搜集了一些对于“h5 上传文件””的相关文章,希望兄弟们能喜欢,看官们一起来学习一下吧!为节省开发时间,最近用h5做了一个上传凭证的页面,通过android studio 打包成apk,本来通过框架的组件能方便的实现上传功能,因为开始没有使用dcloud,apicloud,懒得做较大改动,直接想法修改h5页面实现上传功能。h5本身是很方便的,但是做好的h5的上传功能通过手机浏览器,电脑浏览器都是正常的,但是打包成apk后,input type="file" 点击就没有任何反应了。搞了好久,才解决了这个问题。
直接来代码吧
android studio 3.6 ,
先上h5:
这个上传在浏览器中是好的,打包apk后不反应。
<div class="frambox">
<h2>以下信息无需填写</h2>
<div class="list_box">
<div class="m-cell demo-small-pitch">
<div class="cell-item">
<div class="cell-left">单号</div>
<div class="cell-right">
<input type="text" class="cell-input" readonly=readonly value="{$orderdetail.order_sn}"
autocomplete="off">
</div>
</div>
<div class="cell-item">
<div class="cell-left">拍出人</div>
<div class="cell-right">
<input type="text" class="cell-input" readonly=readonly value="{$orderdetail.netpoint}"
autocomplete="off">
</div>
</div>
<div class="cell-item">
<div class="cell-left">价值</div>
<div class="cell-right">
<input type="text" class="cell-input" readonly=readonly value="{$orderdetail.amount}"
autocomplete="off">
</div>
</div>
<div class="cell-item">
<div class="cell-left">说明</div>
<div class="cell-right">
<input type="text" class="cell-input" placeholder="点击此处可填写" value=""
autocomplete="off">
</div>
</div>
</div>
</div>
</div>
<div class="frambox">
<h2>上传支付凭证(二选一)</h2>
<div class="font_box">
<div class="m-grids-2">
<a href="javascript:sfzzmSc();" class="grids-item">
<div id="sfzzmImg" class="grids-icon">
<img src="images/shenfenzheng-a.png">
</div>
<div class="grids-txt">
<span>上传支付凭证1</span>
</div>
</a> <input style="display: none" id="sfzzm" type="file"
onchange="javascript:showpic(this,'sfzzmImg');" accept="image/*" multiple />
<a href="javascript:sfzfmSc();" class="grids-item">
<div id="sfzfmImg" class="grids-icon">
<img src="images/shenfenz-b.png">
</div>
<div class="grids-txt">
<span>上传支付凭证2</span>
</div>
</a> <input style="display: none" id="sfzfm" type="file"
onchange="javascript:showpic(this,'sfzfmImg');" accept="image/*" multiple />
</div>
</div>
</div>
<div class="btn_mian">
<a href="javascript:next();" class="btn btn-primary btnbom">确认买入</a>
</div>
安卓代码:
package com.tonglianandroid.xinlingshoushop;import android.annotation.SuppressLint;import android.annotation.TargetApi;import android.app.Activity;import android.content.ClipData;import android.content.Intent;import android.net.Uri;import android.os.Build;import android.os.Bundle;import android.webkit.ValueCallback;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import androidx.appcompat.app.AppCompatActivity;import com.tongliananroid.xinlingshoushop.R;public class MainActivity extends AppCompatActivity { private ValueCallback<Uri> uploadMessage; private ValueCallback<Uri[]> uploadMessageAboveL; private final static int FILE_CHOOSER_RESULT_CODE = 10000; @SuppressLint("SetJavaScriptEnabled") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webview = (WebView) findViewById(R.id.web); WebSettings settings = webview.getSettings(); settings.setUseWideViewPort(true); settings.setLoadWithOverviewMode(true); settings.setJavaScriptEnabled(true); // 1.设置WebChromeClient,重写文件上传回调 webview.setWebChromeClient(new WebChromeClient() { // For Android < 3.0 public void openFileChooser(ValueCallback<Uri> valueCallback) { uploadMessage = valueCallback; openImageChooserActivity(); } // For Android >= 3.0 public void openFileChooser(ValueCallback valueCallback, String acceptType) { uploadMessage = valueCallback; openImageChooserActivity(); } //For Android >= 4.1 public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) { uploadMessage = valueCallback; openImageChooserActivity(); } // For Android >= 5.0 @Override public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) { uploadMessageAboveL = filePathCallback; openImageChooserActivity(); return true; } }); //加载本地网页 String targetUrl = ";; webview.loadUrl(targetUrl); } // 2.回调方法触发本地选择文件 private void openImageChooserActivity() { Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE);// i.setType("image/*");//图片上传// i.setType("file/*");//文件上传 i.setType("*/*");//文件上传 startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE); } // 3.选择图片后处理 @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == FILE_CHOOSER_RESULT_CODE) { if (null == uploadMessage && null == uploadMessageAboveL) return; Uri result = data == null || resultCode != RESULT_OK ? null : data.getData(); // Uri result = (((data == null) || (resultCode != RESULT_OK)) ? null : data.getData()); if (uploadMessageAboveL != null) { onActivityResultAboveL(requestCode, resultCode, data); } else if (uploadMessage != null) { uploadMessage.onReceiveValue(result); uploadMessage = null; } } else { //这里uploadMessage跟uploadMessageAboveL在不同系统版本下分别持有了 //WebView对象,在用户取消文件选择器的情况下,需给onReceiveValue传null返回值 //否则WebView在未收到返回值的情况下,无法进行任何操作,文件选择器会失效 if (uploadMessage != null) { uploadMessage.onReceiveValue(null); uploadMessage = null; } else if (uploadMessageAboveL != null) { uploadMessageAboveL.onReceiveValue(null); uploadMessageAboveL = null; } } } // 4. 选择内容回调到Html页面 @TargetApi(Build.VERSION_CODES.LOLLIPOP) private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) { if (requestCode != FILE_CHOOSER_RESULT_CODE || uploadMessageAboveL == null) return; Uri[] results = null; if (resultCode == Activity.RESULT_OK) { if (intent != null) { String dataString = intent.getDataString(); ClipData clipData = intent.getClipData(); if (clipData != null) { results = new Uri[clipData.getItemCount()]; for (int i = 0; i < clipData.getItemCount(); i++) { ClipData.Item item = clipData.getItemAt(i); results[i] = item.getUri(); } } if (dataString != null) results = new Uri[]{Uri.parse(dataString)}; } } uploadMessageAboveL.onReceiveValue(results); uploadMessageAboveL = null; }}效果:
代码简单easy!
标签: #h5 上传文件