Android与js交互上传图片

第一步:获取网络权限,读写文件权限

<uses-feature android:name="android.hardware.camera"/><uses-feature android:name="android.hardware.camera.autofocus"/><uses-permission android:name="android.permission.INTERNET"/><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

第二步:加载本地写好的html文件(定义好js提供给Android的调用方法jsCallAndroid()和安卓提供给js的调用接口upload())放在assets目录下。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{text-align: center;}.one{border: 3px solid blue;}.two{border: 3px solid transparent;}</style></head><body><img id="photo" class="one" src="img/image3.png" width="300" height="300"/>
<button id="btn_jscallandroid" onclick="jsCallAndroid()">点击上传</button><script type="text/javascript"> function jsCallAndroid(){ var str="点击上传"; /*objName就是在android客户端通过代码注入的java对象*/ objName.upload(); } function setImag(path){ document.getElementById("photo").src=""+path } function androidCallJsAddBorder(){ document.getElementById("photo").className="one"; } function androidCallJsRemoveBorder(){ document.getElementById("photo").className="two"; }</script></body></html>

第三步:Android部分代码:

public class MainActivity extends AppCompatActivity { private WebView mWebView; private Button mBtnAddBorder; private Button mBtnRemoveBorder; private SweetAlertDialog dialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); initData(); initListener(); } /** * 初始化UI */ private void initViews() { mWebView = (WebView) findViewById(R.id.webview); mBtnAddBorder = (Button) findViewById(R.id.btn_addborder); mBtnRemoveBorder = (Button) findViewById(R.id.btn_removeborder); } private void initData() { WebSettings settings = mWebView.getSettings(); //设置编码 settings.setDefaultTextEncodingName("utf-8"); //支持js settings.setJavaScriptEnabled(true); settings.setBlockNetworkImage(false); //设置本地调用对象及其接口 mWebView.loadUrl("file:///android_asset/html/webview2js.html"); //第二个参数相当于对象名,要和js中保持一致 mWebView.addJavascriptInterface(new Test(), "objName"); } private void initListener() { //调用js方法给图片移除边框 mBtnRemoveBorder.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mWebView.loadUrl("javascript: androidCallJsRemoveBorder()"); } }); mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl("file:///android_asset/html/webview2js.html"); return true; } }); //调用js方法给图片增加边框 mBtnAddBorder.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //调用无参方法 假如有参的话 例如传一个字符串 //需要在括号中用单引号把要传的字符串引起来 整型变量 直接写即可 mWebView.loadUrl("javascript: androidCallJsAddBorder()"); } }); } class Test { /** * 这里需要注意的是,在Android4.2.2及之后的版本只有带有 * JavascriptInterface注释的public方法才能够被js访问。 * 所以要在show()方法前加:@JavascriptInterface */ @JavascriptInterface public void upload() { dialog = new SweetAlertDialog(MainActivity.this); dialog.setCanceledOnTouchOutside(true); dialog.setTitleText("请选择获取头像方式!") .setCancelText("打开相册") .setConfirmText("打开相机") .setCancelClickListener(new SweetAlertDialog.OnSweetClickListener() { @Override public void onClick(SweetAlertDialog sweetAlertDialog) { //打开相册 openAlbum(); } }) .setConfirmClickListener(new SweetAlertDialog.OnSweetClickListener() { @Override public void onClick(SweetAlertDialog sweetAlertDialog) { //打开相机 openCamera(); } }).show(); } } /** * 打开相册 */ private void openAlbum() { Intent mIntent = new Intent(Intent.ACTION_PICK); //mIntent.addCategory(Intent.CATEGORY_OPENABLE); mIntent.setType("image/*"); startActivityForResult(mIntent, 1); dialog.dismiss(); } /** * 打开相机 */ private void openCamera() { //拍照上传 Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); //下面这句指定调用相机拍照后的照片存储的路径 if (SDCardUtils.getInstance().ExistSDCard()) { File tempFile = new File(Environment.getExternalStorageDirectory() + "/androidtojs/" + "photo.jpg"); if (!tempFile.exists()) { tempFile.getParentFile().mkdirs(); } // 从文件中创建uri Uri uri = Uri.fromFile(tempFile); intent.putExtra(MediaStore.EXTRA_OUTPUT, uri); } startActivityForResult(intent, 2); dialog.dismiss(); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); switch (requestCode) { case 1: //打开相册返回 try { if (data != null) { Uri uri = data.getData(); // 返回的是一个Uri if (uri != null) { String path = UriUtils.getInstance() .getPath(MainActivity.this, uri); if (path == null || path.equals("")) { Toast.makeText(MainActivity.this, "没找到图片 ,请拍照",Toast.LENGTH_SHORT).show(); return; } File s = new File(path); if (s.exists()) { Toast.makeText(MainActivity.this, path, Toast.LENGTH_SHORT).show(); mWebView.loadUrl ("javascript:setImag(‘" + path + "’)"); } else { Toast.makeText(MainActivity.this, "没找到图片, 请拍照",Toast.LENGTH_SHORT).show(); } } } else { Toast.makeText(MainActivity.this, "没找到图片 ,请拍照", Toast.LENGTH_SHORT).show(); } } catch (Exception e) { } break; case 2: //打开相机返回 if (resultCode == RESULT_OK) { //处理拍照 if (SDCardUtils.getInstance().ExistSDCard()) { File temp = new File(Environment.getExternalStorageDirectory() + "/androidtojs/" + "photo.jpg"); if (!temp.exists()) { temp.getParentFile().mkdirs(); } String path = temp.getPath(); mWebView.loadUrl("javascript:setImag(‘" + path + "’)"); } else { Toast.makeText(MainActivity.this, "未找到存储卡, 无法存储照片!", Toast.LENGTH_SHORT).show(); } } break; } }}

注意:该程序在安卓6.0下拍照上传之后显示不了的解决方法:
在build.gradle下把targetSdkVersion设置为22 ,因为安卓6.0需要获取存取权限。