移动开发问题。一段文件上传代码用浏览器可以在手机执行，但cordova打包后无法在手机端执行

Posted 2023-03-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动开发问题。一段文件上传代码用浏览器可以在手机执行，但cordova打包后无法在手机端执行相关的知识，希望对你有一定的参考价值。

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>编辑方案</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=divice-width,inital-scale=1" />
<link href="WYCss/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WYJS/jquery.js"></script>
<script type="text/javascript" src="WYJS/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="WYJS/WYMain.js"></script>

<script type="text/javascript">
function UpladFile()
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var FileController = svaddress + "/Handler/RecvFile.ashx"; // 接收上传文件的后台地址
// FormData 对象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表单数据
form.append("file", fileObj); // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function ()
// alert("上传完成!");
;
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);

function progressFunction(evt)
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable)
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header"><h2>平台</h2></div>
<div data-role="content">
<span id="percentage"></span>
<br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<progress id="progressBar" value="0" max="100"></progress>
</div>
<div data-role="header"><h2>请编辑您的方案</h2></div>
</div>

</body>
</html>
还是我自己来了结吧。这段代码没有问题。问题出在上一个页面以连接的方式引导此页面。<a href="该页面地址">。没想到，页面跳转过来，此页面所有的js都禁用了。我到现在也没搞明白，为什么。用js的方式跳转页面，就都正常了。非常奇怪的问题。不过很高兴，是我通过自己的思考解决了问题。结束了。

参考技术A 变成么？不懂得的

移动端手机上传图片处理

因为最近一段时间，一直在弄微信项目，其中涉及到了证件上传的功能，刚开始的时候一点头绪都没有，上网查了很多资料，QQ群里面也问了不少人，很多人说如果是app程序，可以申请系统权限，然后再去调用系统底层的东西，但是微信是在浏览器里面操作的，我们自定义的页面也是通过微信内置浏览器打开的，而且微信浏览器在内部进行了很多特殊处理，屏蔽了很多东西，所以要在页面调用拍照功能或者是打开手机系统的图库目录是不可能的，当然，这些都只是大伙儿理论上的猜测而已，而在我查了两天的资料之后，发现这个问题原来是可以解决的，而且实现的过程居然也很简单。只是用到了HTML5的file文件上传功能，再配合canvas即可。下面附上源代码：

[java] view plain copy print?在CODE上查看代码片派生到我的代码片
<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html>  
<html lang="zh-CN">  
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<meta name="format-detection" content="telephone=yes">  
<head>  
    <meta charset="UTF-8">  
    <title>上传证件</title>  
    <style>  
        body {  
            margin: 20px 20%;  
            color:#777;  
            text-align: center;  
        }  
        #result{  
            margin-top: 20px;  
        }  
    </style>  
</head>  
<body>  
    <h1 class="text-center">上传证件...</h1>  
    <hr/>  
        <input type="file"/>  
        <div id="result" align="center"></div>  
    <hr/>  
      
    <!--   引入jQuery  -->  
    <script type="text/javascript" src="../js/jQuery/jquery-1.9.1.min.js"></script>  
    <script type="text/javascript" src="../js/LocalResizeIMG.js"></script>  
      
    <!--   mobileBUGFix.js 兼容修复移动设备       -->  
    <script src="../js/mobileBUGFix.mini.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $("input:file").localResizeIMG({  
            width: 500,  
            quality: 0.8,  
            success: function (result) {  
                var img = new Image();  
                img.src = result.base64;  
                console.log(result.clearBase64);  
                //$("body").append(img);  
                $("#result").empty();  
                $("#result").append(img); //呈现图像(拍照結果)  
                $.ajax({  
                    url: "upLoadImageServlet",  
                    type: "POST",  
                    data:{formFile:result.clearBase64},  
                    dataType: "HTML",  
                    timeout: 1000,  
                    error: function(){  
                        alert("Error loading PHP document");  
                    },  
                     success: function(result){  
                        //alert(result);  
                        //console.log(result);  
                        alert("Uploads success~")  
                    }  
                });   
            }  
        });  
    </script>  
</body>  
</html></span>  

   上面实现的流程导致是这样的，首先在前端把图片进行压缩，因为手机的不同，可能有的手机拍照给力，像素高，拍出来的图片的大小就相对大一些，所以这里通过一个插件进行了压缩，然后转换成为Base64的编码，再把Base64的编码使用AJAX来POST到服务器，然后在Java或者PHP后台进行Base64解码，解出来的路径即为上传图片的路径地址，然后再进行存储，写到文件或者数据库里面。

此外，这里需要说明一个问题：很多人都说到了微信内置浏览器，之前我也一直认为微信内置浏览器就是微信自己开发的一套浏览器，然后对很多东西进行了限制。其实不是这样的，微信本身并没有再重新开发一套浏览器，而是调用的系统自身的浏览器，是根据手机的不同系统而变化的。微信内置浏览器调用的是手机系统默认浏览器，ios和Android系统默认浏览器都是webkit内核，只是对HTML5和CSS3的支持程度可能不同。因为浏览器只是系统的一部分，因此系统默认浏览器不会单独升级，对HTM5、CSS3的支持程度与系统版本有很大关系。安卓版微信直接调用系统浏览器内核, iOS则是调用safari,大家可以看到下面1和3的效果是一模一样的，1是微信浏览器打开的，3则是魅族MX 3自带的系统浏览器打开的效果。

上面我的我都测试过了，可以正常运行。下面附上几张照片：

1、这是在微信里面打开的效果



2、这是在手机UC浏览器打开的效果：




3、这个是在系统自带浏览器里面打开的效果（ps:我的手机是魅族MX 3），但是这个不是打开系统图库目录，而是直接定位到了系统的文件夹根目录。

以上是关于移动开发问题。一段文件上传代码用浏览器可以在手机执行，但cordova打包后无法在手机端执行的主要内容，如果未能解决你的问题，请参考以下文章