王大

这世界不只眼前的苟且,还有诗与远方

导航

[转]Android使用WebView从相册/拍照中添加图片

Posted on 2016-01-13 09:37  Cavalry  阅读(341)  评论(1编辑  收藏  举报

原地址:http://blog.csdn.net/djcken/article/details/46379929

解决这个问题花了很长时间搜索了解,网上大部分使用openFileChooser但都没解决一个存在的问题。就是当弹出选择图片/相机框之后,取消选择,就再也不能点击选择按钮了。这篇文章是为了记录这一点,为验证整个流程部署了后端,但是由于很久没接触后端,后端代码是网上的列子,所以后端代码和部署就不说了。单纯的说下Android端的解决方案。

自定义两个文件:

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /** 
  2.  * 自定义 
  3.  * 
  4.  * @Author KenChung 
  5.  */  
  6. public class ReWebViewClient extends WebViewClient {  
  7.   
  8.     @Override  
  9.     public void onPageStarted(WebView view, String url, Bitmap favicon) {  
  10.         super.onPageStarted(view, url, favicon);  
  11.     }  
  12.   
  13.     @Override  
  14.     public void onPageFinished(WebView view, String url) {  
  15.         super.onPageFinished(view, url);  
  16.     }  
  17. }  

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /** 
  2.  * ReWebChomeClient 
  3.  * 
  4.  * @Author KenChung 
  5.  */  
  6. public class ReWebChomeClient extends WebChromeClient {  
  7.   
  8.     private OpenFileChooserCallBack mOpenFileChooserCallBack;  
  9.   
  10.     public ReWebChomeClient(OpenFileChooserCallBack openFileChooserCallBack) {  
  11.         mOpenFileChooserCallBack = openFileChooserCallBack;  
  12.     }  
  13.   
  14.     //For Android 3.0+  
  15.     public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {  
  16.         mOpenFileChooserCallBack.openFileChooserCallBack(uploadMsg, acceptType);  
  17.     }  
  18.   
  19.     // For Android < 3.0  
  20.     public void openFileChooser(ValueCallback<Uri> uploadMsg) {  
  21.         openFileChooser(uploadMsg, "");  
  22.     }  
  23.   
  24.     // For Android  > 4.1.1  
  25.     public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {  
  26.         openFileChooser(uploadMsg, acceptType);  
  27.     }  
  28.   
  29.     public interface OpenFileChooserCallBack {  
  30.         void openFileChooserCallBack(ValueCallback<Uri> uploadMsg, String acceptType);  
  31.     }  
  32.   
  33. }  


选择图片弹框使用AlertDialog:

 

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. public void showOptions() {  
  2.         AlertDialog.Builder alertDialog = new AlertDialog.Builder(this);  
  3.         alertDialog.setOnCancelListener(new ReOnCancelListener());  
  4.         alertDialog.setTitle(R.string.options);  
  5.         alertDialog.setItems(R.array.options, new DialogInterface.OnClickListener() {  
  6.                     @Override  
  7.                     public void onClick(DialogInterface dialog, int which) {  
  8.                         if (which == 0) {  
  9.                             mSourceIntent = ImageUtil.choosePicture();  
  10.                             startActivityForResult(mSourceIntent, REQUEST_CODE_PICK_IMAGE);  
  11.                         } else {  
  12.                             mSourceIntent = ImageUtil.takeBigPicture();  
  13.                             startActivityForResult(mSourceIntent, REQUEST_CODE_IMAGE_CAPTURE);  
  14.                         }  
  15.                     }  
  16.                 }  
  17.         );  
  18.         alertDialog.show();  
  19.     }  


关键代码:(这里的意思是取消弹框之后要告诉WebView不要再等待返回结果,设置为空就等于重置了状态)

 

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. private class ReOnCancelListener implements DialogInterface.OnCancelListener {  
  2.   
  3.         @Override  
  4.         public void onCancel(DialogInterface dialogInterface) {  
  5.             if (mUploadMsg != null) {  
  6.                 mUploadMsg.onReceiveValue(null);  
  7.                 mUploadMsg = null;  
  8.             }  
  9.         }  
  10.     }  


完整MainActivity:

 

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /** 
  2.  * WebViewUpload 
  3.  * 
  4.  * @Author KenChung 
  5.  */  
  6. public class MyActivity extends Activity implements ReWebChomeClient.OpenFileChooserCallBack {  
  7.   
  8.     private static final String TAG = "MyActivity";  
  9.     private static final int REQUEST_CODE_PICK_IMAGE = 0;  
  10.     private static final int REQUEST_CODE_IMAGE_CAPTURE = 1;  
  11.     private WebView mWebView;  
  12.     private Intent mSourceIntent;  
  13.     private ValueCallback<Uri> mUploadMsg;  
  14.   
  15.     @Override  
  16.     public void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.main);  
  19.         mWebView = (WebView) findViewById(R.id.webview);  
  20.         mWebView.setWebChromeClient(new ReWebChomeClient(this));  
  21.         mWebView.setWebViewClient(new ReWebViewClient());  
  22.         fixDirPath();  
  23.         //这里加载自己部署的(也可加载本地资源)  
  24.         mWebView.loadUrl("file:///android_asset/input.html");  
  25.     }  
  26.   
  27.     @Override  
  28.     public void onActivityResult(int requestCode, int resultCode, Intent data) {  
  29.         if (resultCode != Activity.RESULT_OK) {  
  30.             return;  
  31.         }  
  32.         switch (requestCode) {  
  33.             case REQUEST_CODE_IMAGE_CAPTURE:  
  34.             case REQUEST_CODE_PICK_IMAGE: {  
  35.                 try {  
  36.                     if (mUploadMsg == null) {  
  37.                         return;  
  38.                     }  
  39.                     String sourcePath = ImageUtil.retrievePath(this, mSourceIntent, data);  
  40.                     if (TextUtils.isEmpty(sourcePath) || !new File(sourcePath).exists()) {  
  41.                         Log.w(TAG, "sourcePath empty or not exists.");  
  42.                         break;  
  43.                     }  
  44.                     Uri uri = Uri.fromFile(new File(sourcePath));  
  45.                     mUploadMsg.onReceiveValue(uri);  
  46.                 } catch (Exception e) {  
  47.                     e.printStackTrace();  
  48.                 }  
  49.                 break;  
  50.             }  
  51.         }  
  52.     }  
  53.   
  54.     @Override  
  55.     public void openFileChooserCallBack(ValueCallback<Uri> uploadMsg, String acceptType) {  
  56.         mUploadMsg = uploadMsg;  
  57.         showOptions();  
  58.     }  
  59.   
  60.     public void showOptions() {  
  61.         AlertDialog.Builder alertDialog = new AlertDialog.Builder(this);  
  62.         alertDialog.setOnCancelListener(new ReOnCancelListener());  
  63.         alertDialog.setTitle(R.string.options);  
  64.         alertDialog.setItems(R.array.options, new DialogInterface.OnClickListener() {  
  65.                     @Override  
  66.                     public void onClick(DialogInterface dialog, int which) {  
  67.                         if (which == 0) {  
  68.                             mSourceIntent = ImageUtil.choosePicture();  
  69.                             startActivityForResult(mSourceIntent, REQUEST_CODE_PICK_IMAGE);  
  70.                         } else {  
  71.                             mSourceIntent = ImageUtil.takeBigPicture();  
  72.                             startActivityForResult(mSourceIntent, REQUEST_CODE_IMAGE_CAPTURE);  
  73.                         }  
  74.                     }  
  75.                 }  
  76.         );  
  77.         alertDialog.show();  
  78.     }  
  79.   
  80.     private void fixDirPath() {  
  81.         String path = ImageUtil.getDirPath();  
  82.         File file = new File(path);  
  83.         if (!file.exists()) {  
  84.             file.mkdirs();  
  85.         }  
  86.     }  
  87.   
  88.     private class ReOnCancelListener implements DialogInterface.OnCancelListener {  
  89.   
  90.         @Override  
  91.         public void onCancel(DialogInterface dialogInterface) {  
  92.             if (mUploadMsg != null) {  
  93.                 mUploadMsg.onReceiveValue(null);  
  94.                 mUploadMsg = null;  
  95.             }  
  96.         }  
  97.     }  
  98. }  

 

有些哥们反馈没有附上html无法测试,放上html到本地即可:input.html

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta name="viewport" content="user-scalable=no">  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. </head>  
  7. <body>  
  8. <input id="input" type="file"/>  
  9. </body>  
  10. </html>  


源码没有附上本地html,需自行创建。源码下载地址:CSDN下载