Android WebView: Upload image at Android client side. Cannot get the file type in Server side JavaScript

问题

I've tested all the available code on stackOverFlow, but it's still not working.

I use Android 4.4.4 and use WebView to upload image to Server web page, but it fails to get the file type in Server JavaScript code

alert("type:" + input.files[0].type);

If I add the file type check code, this will fail.

I've tested it on desktop (Ubuntu) Chrome, Firefox and on iOS UIWebView. All of them work. The server side will print the file type. Only Android 4.4.4 WebView fails.

Server upload_file.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
        <input type='file' class="imageUpload" multiple="true" />
        <div class="imageOutput"></div>

        <script language="javascript" type="text/javascript">
            $images = $('.imageOutput')

            $(".imageUpload").change(function(event){
                readURL(this);
            });

            function readURL(input) {

                if (input.files && input.files[0]) {
                    alert("type:" + input.files[0].type);        

                    $.each(input.files, function() {
                        var reader = new FileReader();
                        reader.onload = function (e) {           
                            alert("path:" + e.target.result);
                            $images.append('<img src="'+ e.target.result+'" />')
                        }
                        reader.readAsDataURL(this);
                    });
                }
            }
        </script>
    </body>
</html>

Client (Android) MainActivity.java

public class MainActivity extends Activity {

    private static final int FILE_CHOOSER_RESULT_CODE = 1;

    WebView mWebView;

    private ValueCallback<Uri> mUploadMessage;

    private Context mContext;

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

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebViewClient(new CustomWebViewClient());

        mWebView.setWebChromeClient(new WebChromeClient() {
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture){


                mUploadMessage = uploadMsg;

                MainActivity.this.startActivityForResult(Intent.createChooser(intent, "File Chooser"), FILE_CHOOSER_RESULT_CODE);

                Intent intent = new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(intent, FILE_CHOOSER_RESULT_CODE);

            }
        });
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        CookieManager.setAcceptFileSchemeCookies(true);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setAcceptCookie(true);
        mWebView.loadUrl("http://192.168.1.30/upload_file.html");
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {

        if(requestCode == FILE_CHOOSER_RESULT_CODE) {
            if(mUploadMessage == null)
                return;
            Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
            Log.d("Ting", "after result:" + result);
            mUploadMessage.onReceiveValue(result);
            mUploadMessage = null;
        }
    }

    private class CustomWebViewClient extends WebViewClient {
    }

Anyone has ideas how to get the correct file type?

Thanks. Eric

回答1:

The support for file uploads in Android's WebView started in Android 2.2. It worked fine until 4.3 (included). 4.4 did not have file upload support which was only re-introduced in 5.0.

However, if you take a closer look at Android 4.4, you'll see that this has been (partly) fixed in versions 4.4.3 and 4.4.4.

These two versions offer file upload support again. However, the drawback is that there's a bug on those two versions where file extensions will be removed so that the MIME type is always application/octet-stream.

You may take a look at this library:

https://github.com/delight-im/Android-AdvancedWebView

Here's the method to check for file upload availability:

https://github.com/delight-im/Android-AdvancedWebView/blob/ecff154ef390a0dbdb5337bd5dea2055205c104f/Source/src/im/delight/android/webview/AdvancedWebView.java#L1011

回答2:

you can get the realPath from Uri.then use the methed Uri.from(File file) get the new Uri.At last, use new uri can get the file extension

来源：https://stackoverflow.com/questions/28273236/android-webview-upload-image-at-android-client-side-cannot-get-the-file-type-i

标签

android

webview

image-uploading