android调用js文件上传

在Android应用中调用JavaScript文件以实现文件上传功能，涉及到的基础概念包括Android与WebView的交互、JavaScript的执行环境、以及文件上传的网络请求。以下是详细解答：

基础概念

WebView: Android中的WebView组件允许应用内嵌网页，可以加载并显示网页内容。
JavaScriptInterface: 这是一个Android类，用于在WebView中注入Java对象，使得JavaScript代码可以调用这些对象的公共方法。
文件上传: 文件上传通常涉及到选择本地文件，并通过HTTP请求将其发送到服务器。

类型与应用场景

类型: 文件上传可以通过表单提交或使用AJAX技术实现。
应用场景: 社交媒体上传图片、文件管理系统、在线教育平台上传作业等。

实现步骤与示例代码

步骤

在Android应用中设置WebView，并启用JavaScript支持。
创建一个JavaScript接口类，用于处理文件上传的逻辑。
在WebView中加载包含文件上传功能的HTML页面。
在HTML页面中编写JavaScript代码，调用Android端的接口方法来处理文件上传。

示例代码

Android端

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // 添加JavaScript接口
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");

        // 加载本地HTML文件
        webView.loadUrl("file:///android_asset/upload.html");
    }

    public class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        /** Show a toast from the web page */
        @JavascriptInterface
        public void uploadFile(String filePath) {
            // 这里处理文件上传逻辑，例如使用OkHttp发送请求
            OkHttpClient client = new OkHttpClient();
            RequestBody requestBody = new MultipartBody.Builder()
                    .setType(MultipartBody.FORM)
                    .addFormDataPart("file", "filename.jpg",
                            RequestBody.create(MediaType.parse("image/jpeg"), new File(filePath)))
                    .build();

            Request request = new Request.Builder()
                    .url("http://yourserver.com/upload")
                    .post(requestBody)
                    .build();

            client.newCall(request).enqueue(new Callback() {
                @Override
                public void onFailure(Call call, IOException e) {
                    e.printStackTrace();
                }

                @Override
                public void onResponse(Call call, Response response) throws IOException {
                    if (response.isSuccessful()) {
                        final String myResponse = response.body().string();
                        MainActivity.this.runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                Toast.makeText(MainActivity.this, "Upload successful: " + myResponse, Toast.LENGTH_LONG).show();
                            }
                        });
                    }
                }
            });
        }
    }
}

HTML与JavaScript端

<!DOCTYPE html>
<html>
<head>
    <title>File Upload</title>
    <script type="text/javascript">
        function uploadFile() {
            var fileInput = document.getElementById('fileInput');
            var file = fileInput.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var filePath = e.target.result;
                    Android.uploadFile(filePath);
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload</button>
</body>
</html>