个人中心
gpt4 book ai didi

javascript - 无法在 android webview 上运行显示图像预览？

转载 作者：太空宇宙 更新时间：2023-11-03 10:45:40 26 4
gpt4 key购买 nike

首先，这听起来像是一个重复的问题，但我无法通过之前发布的问题获得任何解决方案。我有一个 jsp 页面，我通过它从 PC 选择图像并显示该图像的预览，该图像在 chrome 浏览器上工作正常我的 android 手机也有。但是当我在 WEBVIEW 上运行它时 document.getElementById.click() 函数不起作用，所以我无法获得图像预览。

这是我的 JSP 页面:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">    </script>
    <script>
        function img_prvw(id1,id2)/*******************show preview of  image*******************/
{

var oFiles = document.getElementById(id1).files;
var valid_extensions = /(.jpg|.jpeg|.png)$/i;
if(!(valid_extensions.test(document.getElementById(id1).files[0].name)))
{
document.getElementById('er').innerHTML="Select jpg or png image";
}
else
{
var reader = new FileReader();
reader.readAsDataURL(oFiles[0]);
reader.onload=
function (e) {
document.getElementById(id2).src=e.target.result;
};
}
}

        </script>
 </head>
 <body>
  <input type="file" style="display: none;" id="advrts_img" name="advrts_img" onchange="img_prvw('advrts_img','advrts_img_prvw')">
<img src="images/img_place.png" id="advrts_img_prvw" alt="" class="cursor margin_top10" style="width:100px;height:100px" onClick="document.getElementById('advrts_img').click()">
 </body>
 </html>

这是我的 android WebView 代码:

package com.example.sample_webview;

import android.app.Activity;
import android.content.Intent;
import android.content.res.Configuration;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends Activity {
/** Called when the activity is first created. */

WebView web;

private ValueCallback<Uri> mUploadMessage;
private final static int FILECHOOSER_RESULTCODE = 1;

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

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

    web = (WebView) findViewById(R.id.wView);

    web = new WebView(this);
    web.getSettings().setJavaScriptEnabled(true);
    web.loadUrl("http://minkme.org/minkmeuser/image_preview1.jsp");
    web.setWebViewClient(new myWebClient());
    web.setWebChromeClient(new WebChromeClient() {
        // The undocumented magic method override
        // Eclipse will swear at you if you try to put @Override here
        // For Android 3.0+
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {

            mUploadMessage = 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+
        public void openFileChooser(ValueCallback uploadMsg,
                String acceptType) {
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Browser"),
                    FILECHOOSER_RESULTCODE);
        }

        // For Android 4.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg,
                String acceptType, String capture) {
            mUploadMessage = 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);

        }

    });

    setContentView(web);

}

public class myWebClient extends WebViewClient {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // TODO Auto-generated method stub
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // TODO Auto-generated method stub

        view.loadUrl(url);
        return true;

    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // TODO Auto-generated method stub
        super.onPageFinished(view, url);

    }
}

// flipscreen not loading again
@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
}

// To handle "Back" key press event for WebView to go back to previous
// screen.
/*
 * @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if
 * ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) { web.goBack();
 * return true; } return super.onKeyDown(keyCode, event); }
 */
     }

我只想使用 input type="file"从 android 手机浏览图像。

最佳答案

简而言之:在这里查看您的输入文件 Input file in a webview

经过一些时间和一些测试，我发现 document.getElementById.click 工作得很好。我测试了以下更改

test.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <script src="jquery-1.11.1.min.js">    </script>
    <script>

        function img_prvw(id1,id2)/*******************show preview of  image*******************/
        {
            console.log("Call of img_prvw");
            var oFiles = document.getElementById(id1).files;
            var valid_extensions = /(.jpg|.jpeg|.png)$/i;
            if(!(valid_extensions.test(document.getElementById(id1).files[0].name)))
            {
                document.getElementById('er').innerHTML="Select jpg or png image";
            }
            else
            {
                var reader = new FileReader();
                reader.readAsDataURL(oFiles[0]);
                reader.onload=
                        function (e) {
                            document.getElementById(id2).src=e.target.result;
                        };
            }
        }

        function onAdvrtsImgPrvwClick() {
            console.log('Clickevent');
            document.getElementById('advrts_img').click();
        }

    </script>
</head>
<body>
<input type="file" style="display: none;" id="advrts_img" name="advrts_img" onclick="console.log('click on input');" onchange="img_prvw('advrts_img','advrts_img_prvw')">
<img src="images/img_place.png" id="advrts_img_prvw" alt="" class="cursor margin_top10" style="width:100px;height:100px" onClick="onAdvrtsImgPrvwClick()">
</body>
</html>

MainActivity.java

public class MainActivity extends Activity {

private WebView mWebview;
static final String TAG = "MainActivity";

@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebview = (WebView) findViewById(R.id.webView1);

    mWebview.getSettings().setJavaScriptEnabled(true); // enable javascript

    final Activity activity = this;

    mWebview.setWebViewClient(new WebViewClient() {
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            Toast.makeText(activity, description, Toast.LENGTH_SHORT)
                    .show();
        }
    });

    mWebview.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onConsoleMessage(ConsoleMessage cm)
        {
            String msg = cm.message() + " -- From line " + cm.lineNumber() + " of " + cm.sourceId();
            switch (cm.messageLevel()) {
                case ERROR:
                    Log.e(TAG, msg);
                    break;
                case LOG:
                case TIP:
                    Log.i(TAG, msg);
                    break;
                case WARNING:
                    Log.w(TAG, msg);
                    break;
                case DEBUG:
                default:
                    Log.d(TAG, msg);
                    break;
            }

            return true;
        }
    });


    mWebview.loadUrl("file:///android_asset/test.html");
    //setContentView(mWebview);

}
}

控制台似乎显示消息“点击输入”，所以它已被正确调用，但未正确调用的是on change。

关于javascript - 无法在 android webview 上运行显示图像预览？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24380941/

26 4 0
文章推荐： mysql - 执行 CQL 查询语句时收到错误警报 "invalid string"
文章推荐： c++ - 数组中是否也可以动态删除内存？
文章推荐： c++ - 运行时系统如何在已编译的二进制文件上支持 "GC"？
文章推荐： mysql - 如果我已经有 MySql Workbench，我是否需要在 Windows 7 上单独安装 MySql
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com