Image preview in Android webview before upload not working

Question

well I m making an android webview app, Im facing an issue here. I m trying to preview my image on webpage before uploading Here is my html and java script code im using.

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<script type="text/javascript">

$(document).ready(function(){
    var preview = $(".upload-preview img");

    $(".file").change(function(event){
       var input = $(event.currentTarget);
       var file = input[0].files[0];
       var reader = new FileReader();
       reader.onload = function(e){
           image_base64 = e.target.result;
           preview.attr("src", image_base64);
       };
       reader.readAsDataURL(file);
    });
});

</script>

</head>

<body>
<div class="upload-preview">
    <img />
</div>
<input class="file" name="logo" type="file">

</body>
</html>

here is fiddle

Its working just fine on almost every browser (ie Firefox, Chrome and IE) without any error or warning. here is snapshot of firefox (showing the preview before upload) 在此处输入图片说明

Now whenever I try to open this in android webview its not showing the image preview it shows something like this

在此处输入图片说明

I don't know whats wrong, I have enable the javascript and included the jquery . Its driving me crazy since one day.

here is my android webview code.

package net.kaosfield.wv1;

import my.functions.MyFunctions;
import android.net.Uri;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.util.Log;
import android.view.KeyEvent;
import android.view.Menu;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebViewClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.JsResult;
import android.content.Intent;
import com.google.android.gcm.GCMRegistrar;

public class MainActivity extends Activity {

Activity activity = MainActivity.this;

private WebView webView = null;

private ValueCallback<Uri> uploadMessage;

private final static int FILECHOOSER_RESULTCODE = 1;

private static String registrationId = "";

private MyFunctions myFunctions;

@Override
protected void onActivityResult(int requestCode, int resultCode,
        Intent intent) {
    if (requestCode == FILECHOOSER_RESULTCODE) {
        if (uploadMessage == null)
            return;
        Uri result = intent == null || resultCode != RESULT_OK ? null
                : intent.getData();
        uploadMessage.onReceiveValue(result);
        uploadMessage = null;
    }
}

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

    myFunctions = new MyFunctions(activity);

            webView = (WebView) findViewById(R.id.webview);
    webView.setInitialScale(myFunctions.setWebViewScale());

    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient() {
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (url.startsWith("net.kaosfield.wv1:")) {
                Log.d("wv1", url);
                return true;
            }
            return false;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            Log.d("wv1", "onPageFinished");
            String argument = "d.e.f";
            view.loadUrl("javascript:alert(window.method(\"" + argument
                    + "\"))");
        }
    });
    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsAlert(WebView view, String url, String message,
                JsResult result) {
            if (message.equals("net.kaosfield.wv1")) {
                try {
                    Log.d("wv1", "url: " + url + ", message: " + message);
                    return true;
                } finally {
                    result.confirm(); // in order not to alert
                }
            } else {
                return false;
            }
        }

        // For Android 3.0+
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            uploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Chooser"),
                    FILECHOOSER_RESULTCODE);
        }

        // For Android 3.0+
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback<Uri> uploadMsg,
                String acceptType) {
            uploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Browser"),
                    FILECHOOSER_RESULTCODE);
        }

        // For Android 4.1
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback<Uri> uploadMsg,
                String acceptType, String capture) {
            uploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Chooser"),
                    MainActivity.FILECHOOSER_RESULTCODE);
        }
    });

     webView.loadUrl("http://blue.genetechz.com/qadir/test.php");
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
        webView.goBack();
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up
    // to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

}

Answer 1

You have to make this changes on the onActivityRestult because the urls returned from the gallery aren't right:

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

        if (uploadMessage == null)
            return;

        Uri result = intent == null || resultCode != RESULT_OK ? null
                : intent.getData();
        if (result!=null){

            String filePath = null;

            if ("content".equals(result.getScheme())) {

                Cursor cursor = this.getContentResolver().query(result, new String[] { android.provider.MediaStore.Images.ImageColumns.DATA }, null, null, null);
                    cursor.moveToFirst();   
                    filePath = cursor.getString(0);
                    cursor.close();

            } else {

                filePath = result.getPath();

            }

            Uri myUri = Uri.parse(filePath);
            uploadMessage.onReceiveValue(myUri);

        } else {

            uploadMessage.onReceiveValue(result);

        }

        uploadMessage = null;
    }
}

Now it will return an url with the file:/// format even if you choose the image from the gallery.

Image preview in Android webview before upload not working

Question

1 answers

solution1
3 ACCPTED 2013-11-13 08:38:21

Image preview in Android webview before upload not working

Question

1 answers

solution1 3 ACCPTED 2013-11-13 08:38:21

solution1
3 ACCPTED 2013-11-13 08:38:21