1. 程式人生 > >Android webview與js互動上傳圖片

Android webview與js互動上傳圖片

最近專案中用到webview,並且有上傳圖片功能,iOS不用做任何處理,但Android就不行了,調不到相簿,後百度才知道這是Android webview的侷限性,需要自己擴充套件WebChromeClient來實現,話不多說直接上程式碼:

第一步:擴充套件WebChromeClient

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class OpenFileWebChromeClient extends WebChromeClient {
    public static final int REQUEST_FILE_PICKER = 1;
    public ValueCallback<Uri> mFilePathCallback;
    public ValueCallback<Uri[]> mFilePathCallbacks;
    Activity mContext;
    public OpenFileWebChromeClient(Activity mContext){
        super();
        this.mContext = mContext;
    }
    // Android < 3.0 呼叫這個方法 
    public void openFileChooser(ValueCallback<Uri> filePathCallback) {
        mFilePathCallback = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
    }
     // 3.0 + 呼叫這個方法  
    public void openFileChooser(ValueCallback<Uri> filePathCallback,
            String acceptType) {
        mFilePathCallback = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
    }
//  / js上傳檔案的<input type="file" name="fileField" id="fileField" />事件捕獲 
            // Android > 4.1.1 呼叫這個方法  
    public void openFileChooser(ValueCallback<Uri> filePathCallback,
            String acceptType, String capture) {
        mFilePathCallback = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
    }
//顯示檔案瀏覽視窗
    @Override
    public boolean onShowFileChooser(WebView webView,
            ValueCallback<Uri[]> filePathCallback,
            WebChromeClient.FileChooserParams fileChooserParams) {
        mFilePathCallbacks = filePathCallback;
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("*/*");
        mContext.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
                REQUEST_FILE_PICKER);
        return true;
    }
    
}
第二步:呼叫webview的activity中實現
@Override
	public void onActivityResult(int requestCode, int resultCode, Intent intent) {
		if (requestCode == OpenFileWebChromeClient.REQUEST_FILE_PICKER) {
			if (mOpenFileWebChromeClient.mFilePathCallback != null) {
				Uri result = intent == null || resultCode != Activity.RESULT_OK ? null
						: intent.getData();
				if (result != null) {
					String path = getPhotoPathByLocalUri(ReginActivity.this,
							result);
					Uri uri = Uri.fromFile(new File(path));
					mOpenFileWebChromeClient.mFilePathCallback
							.onReceiveValue(uri);
				} else {
					mOpenFileWebChromeClient.mFilePathCallback
							.onReceiveValue(null);
				}
			}
			if (mOpenFileWebChromeClient.mFilePathCallbacks != null) {
				Uri result = intent == null || resultCode != Activity.RESULT_OK ? null
						: intent.getData();
				if (result != null) {
					String path = getPhotoPathByLocalUri(ReginActivity.this,
							result);
					Uri uri = Uri.fromFile(new File(path));
					mOpenFileWebChromeClient.mFilePathCallbacks
							.onReceiveValue(new Uri[] { uri });
				} else {
					mOpenFileWebChromeClient.mFilePathCallbacks
							.onReceiveValue(null);
				}
			}

			mOpenFileWebChromeClient.mFilePathCallback = null;
			mOpenFileWebChromeClient.mFilePathCallbacks = null;
		}
	}
/**
<span style="white-space:pre">	</span> * 獲取從本地相簿返回來的時候的URI解析出來的檔案路徑
<span style="white-space:pre">	</span> * 
<span style="white-space:pre">	</span> * @return
<span style="white-space:pre">	</span> */
<span style="white-space:pre">	</span>public static String getPhotoPathByLocalUri(Context context,
<span style="white-space:pre">			</span>Uri selectedImage) {
<span style="white-space:pre">		</span>// Uri selectedImage = data.getData();
<span style="white-space:pre">		</span>String[] filePathColumn = { MediaStore.Images.Media.DATA };
<span style="white-space:pre">		</span>Cursor cursor = context.getContentResolver().query(selectedImage,
<span style="white-space:pre">				</span>filePathColumn, null, null, null);
<span style="white-space:pre">		</span>cursor.moveToFirst();
<span style="white-space:pre">		</span>int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
<span style="white-space:pre">		</span>String picturePath = cursor.getString(columnIndex);
<span style="white-space:pre">		</span>cursor.close();
<span style="white-space:pre">		</span>return picturePath;
<span style="white-space:pre">	</span>}

第三步:webview設定setWebChromeClient
/**
	 * 以下是webview的照片上傳時候,用於在網頁開啟android相簿檔案
	 */
	public OpenFileWebChromeClient mOpenFileWebChromeClient = new OpenFileWebChromeClient(
			this);
       mLJWebView.setWebChromeClient(mOpenFileWebChromeClient);
希望能對你有所幫助,謝謝!