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

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

1
回复
4030
查看
[复制链接]

16

主题

112

帖子

920

积分

 楼主| 2018-6-11 18:38:12 显示全部楼层 |阅读模式
本帖最后由 jy 于 2018-6-11 18:44 编辑 快应用web组件目前还不是的元素,所以在web组件中暂时无法直接上传文件,据说6月份新出的1010版本上会支持,但是不知道可以支持到什么程度,能否支持拍照上传呢??? 现在自己在开发的项目原来在web页面上就有用户注册功能,在快应用上也放了注册入口,但是注册时无法通过input上传证照图片,只好变通的实现。 查看web组件的相关帮助文档 https://doc.quickapp.cn/widgets/web.html 发现有titlereceive事件,这个和原来windows应用程序开发时的webbrowser控件的titlechange事件是一样的,都可以实现web组件主动通知框架程序的功能,由此也就来思路了。 假定原来在自己的h5页面上有个控件,用来选择图片文件,并将图片上传到指定URL上进行接收,URL上已经同时指定了接收后要存储的路径和存储文件名(下面简称接收URL),上传成功后可以预知已上传文件的URL(下面简称文件URL) 首先修改h5页面上的input按钮的相关功能,可以根据来源决定是否使用控件,从快应用打开页面时用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. var qmImgChkTimes = 0;
  8. var qmImgChk = parseInt($(this).attr("intid"));
  9. qmImgChk > 0 && clearInterval(qmImgChk);
  10. qmImgChk = setInterval(function(){
  11. var iUrl = 文件URL;
  12. //判断文件是否上传成功
  13. $.ajax({
  14. type:'head',
  15. url:iUrl,
  16. cache:false,
  17. async:false,
  18. success:function(data,textStatus, xhr){
  19. clearInterval(qmImgChk);
  20. //文件已经上传,进行后续操作
  21. }
  22. });
  23. qmImgChkTimes ++;
  24. //检测30次后不再检测
  25. if(qmImgChkTimes > 30){
  26. clearInterval(qmImgChk);
  27. }
  28. }, 2000);
  29. $(this).attr("intid", qmImgChk);
  30. }
复制代码
快应用在界面上摆放的web组件中定义titlereceive事件
  1. <web id="web" ontitlereceive="onWebTitReceive" ></web>
复制代码
然后在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上传功能,也不能确定是否支持拍照上传,所以上述变通方法也许在版本升级后还会有使用的意义
回复

使用道具 举报

0

主题

1

帖子

5

积分

2019-7-23 16:53:42 显示全部楼层
1212121.png
回复

使用道具 举报

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