您的位置:首页 > 移动开发

Android——UI篇:WebView里调用相机/文件选取照片并上传。

2018-03-15 11:58 676 查看
        最近的开发项目中有一个需求,就是在嵌入webview上,需要在webview端来调起本地的相机拍照,或者调起本地文件选择图片并上传到服务器,当然上传这一块的接口是Web端的事情啦,所以我们只管把我们拍照/选取文件的文件地址传给webview端,就可以了,因为我也是刚工作没多久,这个需求以前也是从没接触过,所以这些东西也是从网上参考过来的,然后经过自己的修改,最后测试成功。
        这里说一下思路,webview端要调起手机端的拍照或者选取文件夹,必须是有一个input事件的,查了一下资料,我们可以在android端的webview.setWebChromeClient方法中,重写指定的方法,来拦截webview的input事件,并做我们相应的操作。这里先可以放一下web端的代码,因为对H5的了解也是一知半解,所以只能把H5的代码也贴出来了,供大家参考吧:、

H5代码:<div class="conThree">
<div class="conHead">调配设备照片</div>
<div class="conThreeCon">
<div id="preview"></div>
<label class="input-group-btn">
<input id="fileImage" type="file" size="30" name="fileselect[]" accept="image/jpeg,image/png,image/gif">
<img src="../../../../img/Group.png" alt="">
</label>
<!-- <div class="upload_submit">
<button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
</div> -->
</div>
</div>这个是H5的代码,这里大家可以看到有一个input元素,我们需要拦截到这个input元素,然后根据我们的需求做下一步操作。
下面贴Android端代码:webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
progressBar.setVisibility(View.GONE);//加载完网页进度条消失
} else {
progressBar.setProgress(newProgress);//设置进度值
progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
}
}

/**
* 8(Android 2.2) <= API <= 10(Android 2.3)回调此方法
*/
private void openFileChooser(android.webkit.ValueCallback<Uri> uploadMsg) {
Log.e("WangJ", "运行方法 openFileChooser-1");
// (2)该方法回调时说明版本API < 21,此时将结果赋值给 mUploadCallbackBelow,使之 != null
mUploadCallbackBelow = uploadMsg;
takePhoto();
}

/**
* 11(Android 3.0) <= API <= 15(Android 4.0.3)回调此方法
*/
public void openFileChooser(android.webkit.ValueCallback<Uri> uploadMsg, String acceptType) {
Log.e("WangJ", "运行方法 openFileChooser-2 (acceptType: " + acceptType + ")");
// 这里我们就不区分input的参数了,直接用拍照
openFileChooser(uploadMsg);
}

/**
* 16(Android 4.1.2) <= API <= 20(Android 4.4W.2)回调此方法
*/
public void openFileChooser(android.webkit.ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
Log.e("WangJ", "运行方法 openFileChooser-3 (acceptType: " + acceptType + "; capture: " + capture + ")");
// 这里我们就不区分input的参数了,直接用拍照
openFileChooser(uploadMsg);
}

/**
* API >= 21(Android 5.0.1)回调此方法
*/
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
Log.e("WangJ", "运行方法 onShowFileChooser");
// (1)该方法回调时说明版本API >= 21,此时将结果赋值给 mUploadCallbackAboveL,使之 != null
mUploadCallbackAboveL = valueCallback;
takePhoto();
return true;
}
});
        到这里的java代码就是来拦截input时间的,里面做了很多api版本的判断,不同版本的api调用不同的方法,下面再贴出来其他一些方法:
调起相机/选择文件的方法:takePhoto(); /**
* 调用相机
*/
private void takePhoto() {
// 指定拍照存储位置的方式调起相机
String filePath = Environment.getExternalStorageDirectory() + File.separator
+ Environment.DIRECTORY_PICTURES + File.separator;
String fileName = "IMG_" + DateFormat.format("yyyyMMdd_hhmmss", Calendar.getInstance(Locale.CHINA)) + ".jpg";
imageUri = Uri.fromFile(new File(filePath + fileName));

// Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
// intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
// startActivityForResult(intent, REQUEST_CODE);

// 选择图片(不包括相机拍照),则不用成功后发刷新图库的广播
// Intent i = new Intent(Intent.ACTION_GET_CONTENT);
// i.addCategory(Intent.CATEGORY_OPENABLE);
// i.setType("image/*");
// startActivityForResult(Intent.createChooser(i, "Image Chooser"), REQUEST_CODE);

Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);

Intent Photo = new Intent(Intent.ACTION_PICK,
android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

Intent chooserIntent = Intent.createChooser(Photo, "Image Chooser");
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent});

startActivityForResult(chooserIntent, REQUEST_CODE);
}onActivityResult回调:@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == REQUEST_CODE) {
// 经过上边(1)、(2)两个赋值操作,此处即可根据其值是否为空来决定采用哪种处理方法
if (mUploadCallbackBelow != null) {
chooseBelow(resultCode, data);
} else if (mUploadCallbackAboveL != null) {
chooseAbove(resultCode, data);
} else {
Toast.makeText(this, "发生错误", Toast.LENGTH_SHORT).show();
}
}
}其他一些方法:/**
* Android API < 21(Android 5.0)版本的回调处理
* @param resultCode 选取文件或拍照的返回码
* @param data 选取文件或拍照的返回结果
*/
private void chooseBelow(int resultCode, Intent data) {
Log.e("WangJ", "返回调用方法--chooseBelow");

if (RESULT_OK == resultCode) {
updatePhotos();

if (data != null) {
// 这里是针对文件路径处理
Uri uri = data.getData();
if (uri != null) {
Log.e("WangJ", "系统返回URI:" + uri.toString());
mUploadCallbackBelow.onReceiveValue(uri);
} else {
mUploadCallbackBelow.onReceiveValue(null);
}
} else {
// 以指定图像存储路径的方式调起相机,成功后返回data为空
Log.e("WangJ", "自定义结果:" + imageUri.toString());
mUploadCallbackBelow.onReceiveValue(imageUri);
}
} else {
mUploadCallbackBelow.onReceiveValue(null);
}
mUploadCallbackBelow = null;
}

/**
* Android API >= 21(Android 5.0) 版本的回调处理
* @param resultCode 选取文件或拍照的返回码
* @param data 选取文件或拍照的返回结果
*/
private void chooseAbove(int resultCode, Intent data) {
Log.e("WangJ", "返回调用方法--chooseAbove");

if (RESULT_OK == resultCode) {
updatePhotos();

if (data != null) {
// 这里是针对从文件中选图片的处理
Uri[] results;
Uri uriData = data.getData();
if (uriData != null) {
results = new Uri[]{uriData};
for (Uri uri : results) {
Log.e("WangJ", "系统返回URI:" + uri.toString());
}
mUploadCallbackAboveL.onReceiveValue(results);
} else {
mUploadCallbackAboveL.onReceiveValue(null);
}
} else {
Log.e("WangJ", "自定义结果:" + imageUri.toString());
mUploadCallbackAboveL.onReceiveValue(new Uri[]{imageUri});
}
} else {
mUploadCallbackAboveL.onReceiveValue(null);
}
mUploadCallbackAboveL = null;
}

private void updatePhotos() {
// 该广播即使多发(即选取照片成功时也发送)也没有关系,只是唤醒系统刷新媒体文件
Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
intent.setData(imageUri);
sendBroadcast(intent);
}相关的全局变量: private android.webkit.ValueCallback<Uri[]> mUploadCallbackAboveL;
private android.webkit.ValueCallback<Uri> mUploadCallbackBelow;
private Uri imageUri;
private int REQUEST_CODE = 1234;        这些代码大家可以直接拿去用的,亲测有效的,最后说一下这些代码可以拍照/选择图片然后回调显示到webview中的,至于将图片上传到服务器的问题,这个就比较简单了,一般都是web端做上传操作,如果要原生做的话也好做,就是普通的文件上传,大家可以自由发挥了。
        最后说下,别忘了加一些相应的网络权限什么的。否则无法运行的。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: