Android与js交互上传图片

来源：互联网发布：好人知乎编辑：程序博客网时间：2024/06/06 01:07

第一步：获取网络权限，读写文件权限

<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"/><br><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需要获取存取权限。

阅读全文

0 0