请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用web组件不支持<input type="file">的临时变通方法

0
回复
1141
查看
[复制链接]

16

主题

112

帖子

920

积分

 楼主| 2018-6-11 18:38:12 显示全部楼层 |阅读模式
本帖最后由 jy 于 2018-6-11 18:44 编辑

快应用web组件目前还不是<input type="file">的元素,所以在web组件中暂时无法直接上传文件,据说6月份新出的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,然后定时判断文件是否上传成功
  1. function btnClick(){
  2.         //改变页面标题,用于通知快应用要上传图片啦
  3.         var tit = document.title;
  4.         document.title = "upload@@接收URL";
  5.         setTimeout(function(){document.title = tit;},1000); //设置完毕后进行title复原,保证下次调用时可以改变title
  6.         
  7.         //启动定时器,定时判断图片是否已经上传到服务器,最好指定最大判断次数
  8.         var qmImgChkTimes = 0;               
  9.         var qmImgChk = parseInt($(this).attr("intid"));
  10.         qmImgChk > 0 && clearInterval(qmImgChk);
  11.         qmImgChk = setInterval(function(){
  12.                 var iUrl = 文件URL;
  13.                 //判断文件是否上传成功
  14.                 $.ajax({
  15.                         type:'head',
  16.                         url:iUrl,
  17.                         cache:false,
  18.                         async:false,
  19.                         success:function(data,textStatus, xhr){
  20.                                 clearInterval(qmImgChk);
  21.                                 //文件已经上传,进行后续操作        
  22.                                 
  23.                                 
  24.                         }
  25.                 });
  26.                                 
  27.                 qmImgChkTimes ++;        
  28.                 //检测30次后不再检测               
  29.                 if(qmImgChkTimes > 30){
  30.                         clearInterval(qmImgChk);
  31.                 }
  32.         }, 2000);        
  33.         $(this).attr("intid", qmImgChk);
  34. }
复制代码



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

  1. <web id="web" ontitlereceive="onWebTitReceive" ></web>               
  2.                
复制代码
然后在titlereceive事件中检测是否有文件上传的请求,有上传请求时弹出上传提示,可以选择拍照上传或从图库中选择
  1. import prompt from '@system.prompt'
  2. import webview from '@system.webview'
  3. import request from '@system.request'
  4. import media from '@system.media'
  5. import network from '@system.network'



  6. onWebTitChange(obj){
  7.         var that = this;
  8.         if(!obj.title){return}
  9.         if(obj.title.indexOf('upload@') == 0){
  10.                 var finfo = obj.title.substr(8, 100000);               
  11.                 that.onNetworkType(function(m, tp){
  12.                         if(tp == "none"){
  13.                                 msgbox("当前网络不可用,无法上传文件!")
  14.                                 return;
  15.                         }
  16.                         var msg = (m ? '您当前正在使用 ' + tp.toUpperCase() + ' 模式上网,上传文件会耗费流量,确定继续吗?\r\n\r\n' : '') + '继续请选择文件上传方式';
  17.                         var btnA = [{
  18.                                         text: '拍照上传',
  19.                                         color: '#3CC51F'
  20.                         },{
  21.                                         text: '图库中选择',
  22.                                         color: '#00a7e6'
  23.                         }];
  24.                         if(m){
  25.                                 btnA.push({text: '取消',color: '#f44336'})
  26.                         }
  27.                         prompt.showDialog({
  28.                                 title: '文件上传',
  29.                                 message: msg,
  30.                                 buttons: btnA,
  31.                                 success: function (res) {
  32.                                         if (res.index == 0) {
  33.                                                 media.takePhoto({
  34.                                                         success: function (data) {
  35.                                                                 that.onFileUpload(finfo, data.uri);
  36.                                                         }
  37.                                                 });
  38.                                         }else if (res.index == 1){
  39.                                                 media.pickImage({
  40.                                                         success: function (data) {
  41.                                                                 that.onFileUpload(finfo, data.uri);
  42.                                                         }
  43.                                                 });
  44.                                         }
  45.                                 }
  46.                         });       
  47.                 });                               
  48.         }
  49. },
  50. onFileUpload(furl, furi){                       
  51.         //furl为接收URL, furi为本地文件路径
  52.         var that = this;
  53.         var fname = 解析furl获取文件名
  54.         //开始上传文件...');
  55.         request.upload({
  56.                 url: furl,
  57.                 files: [
  58.                         {
  59.                                 uri: furi,
  60.                                 name: 'file',
  61.                                 filename: fname
  62.                         }
  63.                 ],
  64.                 success: function (data) {
  65.                         //上传成功
  66.                 },
  67.                 fail: function (data, code) {
  68.                         //上传失败
  69.                 }
  70.         });
  71. },
  72. onNetworkType(callback){
  73.         network.getType({
  74.                 success: function (data) {
  75.                         if(callback){
  76.                                 callback(data.metered, data.type);
  77.                         }
  78.                 }
  79.         })
  80. }
复制代码




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

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



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册