,,

Android HTML5圖片上傳實(shí)現(xiàn)方案

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

Ccoffee

2025年3月13日 17:14 本文熱度 677

：Android HTML5圖片上傳實(shí)現(xiàn)方案

一、HTML5 前端實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head>
    <title>圖片上傳示例</title>
</head>
<body>
    <input type="file" id="uploadInput" accept="image/*" />
    <img id="preview" style="max-width: 300px;" />
    <button onclick="upload()">上傳</button>

    <script>
        const input = document.getElementById('uploadInput');
        const preview = document.getElementById('preview');

        // 圖片預(yù)覽
        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    preview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        // 上傳函數(shù)
        function upload() {
            const file = input.files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('image', file);

            fetch('https://your-server.com/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
            })
            .catch(error => {
                console.error('上傳失敗:', error);
            });
        }
    </script>
</body>
</html>

二、Android WebView 配置

1. 添加權(quán)限

在 AndroidManifest.xml 中添加權(quán)限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

2. 配置 WebView

WebView webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();

// 啟用 JavaScript 和 文件訪問(wèn)
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowContentAccess(true);

// 處理文件上傳請(qǐng)求（針對(duì) Android 5.0+）
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

// 加載本地或遠(yuǎn)程 HTML
webView.loadUrl("file:///android_asset/upload.html");

3. 處理權(quán)限請(qǐng)求（Android 6.0+）

在 Activity 中動(dòng)態(tài)請(qǐng)求存儲(chǔ)權(quán)限：

private static final int REQUEST_STORAGE_PERMISSION = 1;

private void checkPermissions() {
    if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE)
            != PackageManager.PERMISSION_GRANTED) {
        ActivityCompat.requestPermissions(this,
                new String[]{Manifest.permission.READ_EXTERNAL_STORAGE},
                REQUEST_STORAGE_PERMISSION);
    }
}

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (requestCode == REQUEST_STORAGE_PERMISSION) {
        if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            // 權(quán)限已授予
        }
    }
}

在 Android WebView 中點(diǎn)擊 <input type="file"> 無(wú)法打開圖片列表的問(wèn)題，通常是由于 WebView 未正確配置文件選擇支持或 權(quán)限問(wèn)題 導(dǎo)致。以下是完整的解決方案：

一、核心問(wèn)題原因

WebView 未配置文件選擇回調(diào)處理
未正確處理 Android 權(quán)限
WebView 安全策略限制

二、解決方案步驟

1. 添加文件選擇回調(diào)處理

在 Activity 或 Fragment 中實(shí)現(xiàn) WebChromeClient 并重寫文件選擇方法：

webView.setWebChromeClient(new WebChromeClient() {
    // 針對(duì) Android 5.0+ (API 21+)
    @Override
    public boolean onShowFileChooser(WebView webView, 
                                    ValueCallback<Uri[]> filePathCallback, 
                                    FileChooserParams fileChooserParams) {
        mFilePathCallback = filePathCallback;
        openFileChooser();
        return true;
    }

    // 針對(duì) Android < 5.0 (已棄用但需要兼容)
    @SuppressWarnings("deprecation")
    @Override
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
        mUploadMessage = uploadMsg;
        openFileChooserLegacy();
    }
});

// 定義成員變量
private ValueCallback<Uri[]> mFilePathCallback;
private ValueCallback<Uri> mUploadMessage;

2. 實(shí)現(xiàn)文件選擇器

private void openFileChooser() {
    Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
    intent.addCategory(Intent.CATEGORY_OPENABLE);
    intent.setType("image/*");
    startActivityForResult(intent, REQUEST_CODE_FILE_CHOOSER);
}

// 兼容舊版本
private void openFileChooserLegacy() {
    Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
    intent.addCategory(Intent.CATEGORY_OPENABLE);
    intent.setType("image/*");
    startActivityForResult(Intent.createChooser(intent, "選擇圖片"), REQUEST_CODE_FILE_CHOOSER_LEGACY);
}

3. 處理選擇結(jié)果

在 onActivityResult 中處理返回的圖片 URI：

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    if (requestCode == REQUEST_CODE_FILE_CHOOSER) {
        if (resultCode == RESULT_OK && data != null) {
            Uri[] resultUris = WebChromeClient.FileChooserParams.parseResult(resultCode, data);
            if (mFilePathCallback != null) {
                mFilePathCallback.onReceiveValue(resultUris);
                mFilePathCallback = null;
            }
        } else {
            if (mFilePathCallback != null) {
                mFilePathCallback.onReceiveValue(null);
                mFilePathCallback = null;
            }
        }
    } else if (requestCode == REQUEST_CODE_FILE_CHOOSER_LEGACY) {
        if (resultCode == RESULT_OK && data != null) {
            Uri resultUri = data.getData();
            if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(resultUri);
                mUploadMessage = null;
            }
        } else {
            if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(null);
                mUploadMessage = null;
            }
        }
    }
}

4. 完整權(quán)限處理

確保已動(dòng)態(tài)請(qǐng)求 READ_EXTERNAL_STORAGE 權(quán)限：

// 在 Activity 的 onCreate 中檢查權(quán)限
private static final int REQUEST_CODE_PERMISSION = 100;

private void checkPermissions() {
    if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE)
            != PackageManager.PERMISSION_GRANTED) {
        ActivityCompat.requestPermissions(this,
                new String[]{Manifest.permission.READ_EXTERNAL_STORAGE},
                REQUEST_CODE_PERMISSION);
    }
}

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (requestCode == REQUEST_CODE_PERMISSION) {
        if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            // 權(quán)限已授予，重新加載頁(yè)面或提示用戶操作
        }
    }
}

三、關(guān)鍵配置補(bǔ)充

WebView 初始化

2. AndroidManifest.xml

WebView webView = findViewById(R.id.webView);
WebSettings settings = webView.getSettings();

// 必須配置
settings.setJavaScriptEnabled(true);
settings.setAllowFileAccess(true);
settings.setAllowContentAccess(true);

// 針對(duì) Android 5.0+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

確保添加權(quán)限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

該文章在 2025/3/13 17:14:06 編輯過(guò)

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口