快应用1000版本web组件不支持input的type为file的临时变通方法

快应用1000及以前版本的web组件目前还不是<input type="file">的元素，所以在web组件中暂时无法直接上传文件，据说1010版本上会支持，但是不知道可以支持到什么程度，能否支持拍照上传呢？？？

现在自己在开发的项目原来在web页面上就有用户注册功能，在快应用上也放了注册入口，但是注册时无法通过input上传证照图片，只好变通的实现。

查看web组件的相关帮助文档 https://doc.quickapp.cn/widgets/web.html
发现有titlereceive事件，这个和原来windows应用程序开发时的webbrowser控件的titlechange事件是一样的，都可以实现web组件主动通知框架程序的功能，由此也就来思路了。

假定原来在自己的h5页面上有个<input type="file">控件，用来选择图片文件，并将图片上传到指定URL 上进行接收,URL上已经同时指定了接收后要存储的路径和存储文件名（下面简称接收URL），上传成功后可以预知已上传文件的URL（下面简称文件URL）

首先修改h5页面上的input按钮的相关功能，可以根据来源决定是否使用 <input type="file">控件，从快应用打开页面时用button代替即可，onclick时，动态的改变h5页面的title，然后定时判断文件是否上传成功

function btnClick(){
//改变页面标题，用于通知快应用要上传图片啦
var tit = document.title;
document.title = "upload@@接收URL";
setTimeout(function(){document.title = tit;},1000); //设置完毕后进行title复原，保证下次调用时可以改变title
//启动定时器，定时判断图片是否已经上传到服务器，最好指定最大判断次数
var qmImgChkTimes = 0;
var qmImgChk = parseInt($(this).attr("intid"));
qmImgChk > 0 && clearInterval(qmImgChk);
qmImgChk = setInterval(function(){
var iUrl = 文件URL;
//判断文件是否上传成功
$.ajax({
type:'head',
url:iUrl,
cache:false,
async:false,
success:function(data,textStatus, xhr){
clearInterval(qmImgChk);
//文件已经上传，进行后续操作
}
});
qmImgChkTimes ++;
//检测30次后不再检测
if(qmImgChkTimes > 30){
clearInterval(qmImgChk);
}
}, 2000);
$(this).attr("intid", qmImgChk);
}

复制代码

快应用在界面上摆放的web组件中定义titlereceive事件

<web id="web" ontitlereceive="onWebTitReceive" ></web>

复制代码

然后在titlereceive事件中检测是否有文件上传的请求，有上传请求时弹出上传提示，可以选择拍照上传或从图库中选择

import prompt from '@system.prompt'
import webview from '@system.webview'
import request from '@system.request'
import media from '@system.media'
import network from '@system.network'
onWebTitChange(obj){
var that = this;
if(!obj.title){return}
if(obj.title.indexOf('upload@') == 0){
var finfo = obj.title.substr(8, 100000);
that.onNetworkType(function(m, tp){
if(tp == "none"){
msgbox("当前网络不可用，无法上传文件！")
return;
}
var msg = (m ? '您当前正在使用 ' + tp.toUpperCase() + ' 模式上网，上传文件会耗费流量，确定继续吗？\r\n\r\n' : '') + '继续请选择文件上传方式';
var btnA = [{
text: '拍照上传',
color: '#3CC51F'
},{
text: '图库中选择',
color: '#00a7e6'
}];
if(m){
btnA.push({text: '取消',color: '#f44336'})
}
prompt.showDialog({
title: '文件上传',
message: msg,
buttons: btnA,
success: function (res) {
if (res.index == 0) {
media.takePhoto({
success: function (data) {
that.onFileUpload(finfo, data.uri);
}
});
}else if (res.index == 1){
media.pickImage({
success: function (data) {
that.onFileUpload(finfo, data.uri);
}
});
}
}
});
});
}
},
onFileUpload(furl, furi){
//furl为接收URL， furi为本地文件路径
var that = this;
var fname = 解析furl获取文件名
//开始上传文件...');
request.upload({
url: furl,
files: [
{
uri: furi,
name: 'file',
filename: fname
}
],
success: function (data) {
//上传成功
},
fail: function (data, code) {
//上传失败
}
});
},
onNetworkType(callback){
network.getType({
success: function (data) {
if(callback){
callback(data.metered, data.type);
}
}
})
}

复制代码

这种做法的弊端是h5页面中要定时去判断文件是否上传，会消耗一定的流量，同时h5和快应用都需要进行改动适配。
优势就是可以选择图片上传，也可以拍照上传，还可以在上传前判断手机端的网络状况。（下一版本的快应用据说也会支持选择非图片文件的接口）

下一版本即便支持了h5页面中的input上传功能，也不能确定是否支持拍照上传，所以上述变通方法也许在版本升级后还会有使用的意义

快应用1000版本web组件不支持input的type为file的临时变通方法

猜你喜欢