西宁企业网站建设公司,热门网站建设代理,网站商城维护怎么做,淮北做网站电话技术栈 jquery文件上传#xff1a;jquery.fileupload#xff0c;github 文档apk 文件解析#xff1a;app-info-parser#xff0c;github 文档参考#xff1a;前端解析ipa、apk安装包信息 —— app-info-parser 支持功能 点击或拖拽上传 apk 文件校验文件类型及文件大小js …技术栈 jquery文件上传jquery.fileuploadgithub 文档apk 文件解析app-info-parsergithub 文档参考前端解析ipa、apk安装包信息 —— app-info-parser 支持功能 点击或拖拽上传 apk 文件校验文件类型及文件大小js 解析 apk 文件信息展示并通过上传接口提交给后端支持上传过程中取消上传支持上传成功显示上传信息支持解析、上传等友好提示支持从历史记录所有已上传文件中选择一个支持假文件处理比如 .txt 文件改为 .apk 文件上传进度实时更新百分比B/s拖拽进入拖拽区时高亮显示demo 预览 说明 由于上传接口需要后端接口的支持所以没法用静态页面展示完整的交互。因此在这儿放个预览图。 为了避免 gif 图太大只录屏了点击上传成功的情况。其他情况没录屏可自行下载 demo 搭建后端环境模拟上传接口实现。demo 中用 php 语言模拟实现了上传接口。源码地址 难点 js 解析 APK 文件信息拖拽上传点击上传和拖拽上传绑定到一起在上传之前不知道 APK 文件信息需要执行上传操作过程中将解析的文件信息作为参数放到上传接口中上传过程中取消上传假文件解析错误处理js 监控控制台错误实现 1. js 解析 APK 文件信息 经过查阅了解到 APK 文件的本质就是一个压缩包其中包含一堆XML文件资产和类文件。javascript 解析 APK 文件信息要做的就是先解压然后读取其中相关的文件就能得到文件信息了。 难点在解压上参考的基本都需要借助 node 环境。由于现在维护的系统是基于 jquery 环境的。所以最终采用了前端解析ipa、apk安装包信息 —— app-info-parser 该文的方案很好的解决了问题。在此非常感谢该作者。 // apk 文件解析
var parser new AppInfoParser(data.files[0]);
parser.parse().then(function(result) {uploadMod.doms.uploadErr.html();var appInfo result.application || {};var formAppInfo {name: appInfo.label ? (Array.isArray(appInfo.label) ? appInfo.label[0] : appInfo.label) : ,package: result.package,version: result.versionName,version_code: result.versionCode};// 省略其他操作代码...
}).catch(function (err) {uploadMod.doms.uploadErr.html(文件解析错误请重新上传);
}); 说明 由于 app-info-parser 底层用了 async 语法在 IE 下是不兼容的。在 firefox、chrome 下是正常的。上传假 APK 文件不能处理js 脚本会报错File format is not recognized.。目前想到的解决方案是 js 监听错误然后进行处理。若有更好想法的欢迎我。在此提前感谢。// console.error() 监控处理
consoleError window.console.error;
window.console.error function () {consoleError consoleError.apply(window, arguments);for (var info in arguments) {if (arguments[info] File format is not recognized.) {$(#app_parse).html(p stylecolor:red;由于您上传了非真正的 APK 文件导致脚本解析出错即将重新刷新页面给您带来不好的体验敬请原谅/p);setTimeout(function () {history.go(0);}, 3000);return false;}}
}; 为了避免页面其它错误导致脚本无法运行因此做了页面刷新。 2. 拖拽上传点击上传和拖拽上传绑定到一起 在做这个功能前想到拖拽上传可以利用 H5 的拖拽功能及原生 js 的 file 文件上传实现但需要处理兼容性问题。后来想到系统中已经引入了 jquery.fileupload 库于是特地翻阅了文档支持拖拽上传。因此采用该库实现拖拽上传功能。 html 布局如下 div classupload-area idupload_areai classicon-upload/ip classupload-text将安装包拖拽至此上传或 em选择文件/em/pp classupload-tip支持 APK 文件最大不超过 300 MB/pinput typefile idupload_input namefile acceptapplication/vnd.android.package-archive data-size300/
/div 如何将 拖拽、点击 一起处理用一个上传方法实现而不是分开需要实现2遍 想法是点击外层容器触发 input 点击事件。前提是需要实现 input 点击事件并且阻止冒泡事件因为外层也有点击事件。 $(body).on(click, #upload_input, function (e) {e.stopPropagation();uploadMod.methods.fileUpload();
}).on(click drop dragenter dragover dragleave, #upload_area, function(e) {e.preventDefault();uploadMod.doms.uploadErr.html();switch (e.type) {case click:$(#upload_input).val(null);$(#upload_input).click();break;case drop:uploadMod.doms.uploadArea.removeClass(active);$(#upload_input).val(null);uploadMod.methods.fileUpload();break;case dragenter:case dragover:uploadMod.doms.uploadArea.addClass(active);break;case dragleave:uploadMod.doms.uploadArea.removeClass(active);break;}
}) 实现了拖拽进入高亮、远离恢复。需要注意的是$(#upload_input) 不能用缓存的变量。否则会导致二次点击上传失效无法触发点击打开文件窗口。以及此时拖拽上传一个正确的文件会触发 2 次文件上传。发送 2 次上传接口。感兴趣的朋友可以自己用缓存的试一下。 案例复现 点击假的内容为空的 apk 文件会提示文件尺寸不对。此时第二次点击无法触发 input 的点击事件。反复多次依然无效。此时通过拖拽上传能够正常执行但是会触发 2 次上传处理解析 2 次文件发送 2 次上传接口请求。3. 在上传之前不知道 APK 文件信息需要执行上传操作过程中将解析的文件信息作为参数放到上传接口中 之前做过的上传是在上传前就已经知道在上传时需要提交的额外参数值。 $(#upload_input).fileupload({url: http://localhost:80/jq-drag-upload-apk-parse/upload.php,dataType: json,formData: params, // params 为 js 对象是需要提交的参数multi: false,// 省略....
}) 但现在在上传前是不知道参数值的需要在执行上传操作拿到上传文件信息并解析出上传文件的信息然后将解析信息做为参数值放到上传请求中。那怎么做呢研究了很久才找到。 $(#upload_input).fileupload({url: http://localhost:80/jq-drag-upload-apk-parse/upload.php,dataType: json,formData: params, // params 为 js 对象是需要提交的参数multi: false,add: function (e, data) {// 省略文件类型及大小校验// 省略 APK 文件解析及进度条等的 UI 初始化$(e.target).fileupload(option,formData,formAppInfo // APK 解析出的数据);data.submit();},// 省略....
}) 4. 上传过程中取消上传 这个相对比较容易。利用上传回调中的 data.abort() 即可实现。需要处理的是在 add() 方法里需要先在外层缓存一下 data才方便对其的调用。 $(#upload_input).fileupload({url: http://localhost:80/jq-drag-upload-apk-parse/upload.php,dataType: json,formData: params, // params 为 js 对象是需要提交的参数multi: false,add: function (e, data) {// 省略文件类型及大小校验// 省略 APK 文件解析及进度条等的 UI 初始化// 外层缓存方便调取消上传uploadMod.uploadXHR data;$(e.target).fileupload(option,formData,formAppInfo // APK 解析出的数据);data.submit();},fail: function(e, data) {if (data.errorThrown abort) {uploadMod.doms.uploadErr.html(已取消上传可重新上传);} else {uploadMod.doms.uploadErr.html(上传失败请重新上传);}},// 省略....
}) $(body).on(click, #upload_cancel, function () {uploadMod.uploadXHR.abort();
}) 5. 文件上传的主要代码 fileCheck: function(e, data) {// 文件格式及文件大小校验var acceptFileTypes uploadMod.doms.uploadInput.attr(accept);var supportFileTypes [apk]; // 通过name后缀再校验一次避免获取不到type的情况var maxSize uploadMod.doms.uploadInput.data(size) * 1024 * 1024; // 单位mb需要转换为bvar fileTypeFlag data.originalFiles.every(function(item) {if (item.type) {return acceptFileTypes.indexOf(item.type) -1;} else {var splits (item.name || file).split(.);var fileType splits[splits.length - 1];return supportFileTypes.indexOf(fileType) -1;}});if (!fileTypeFlag) {uploadMod.doms.uploadErr.html(请上传 APK 文件);return false;}var fileSizeFlag data.originalFiles.every(function(item) {return item.size 0 item.size maxSize;});if (!fileSizeFlag) {data {};uploadMod.doms.uploadErr.html(文件大小不正确);return false;}uploadMod.doms.progressWrap.show();var $appParse uploadMod.doms.progressWrap.find(.app-parse),$progressCon uploadMod.doms.progressWrap.find(.con);$appParse.show();$progressCon.hide();// apk 文件解析var parser new AppInfoParser(data.files[0]);parser.parse().then(function(result) {uploadMod.doms.uploadErr.html();var appInfo result.application || {};var formAppInfo {name: appInfo.label ? (Array.isArray(appInfo.label) ? appInfo.label[0] : appInfo.label) : ,package: result.package,version: result.versionName,version_code: result.versionCode};// 进度条初始化$appParse.hide();$progressCon.show();if (result.icon) {uploadMod.doms.progressWrap.find(.icon-app).css(background-image, url( result.icon ));}uploadMod.doms.progressWrap.find(.name).html(formAppInfo.name);uploadMod.doms.progressWrap.find(.package).html(formAppInfo.package);uploadMod.doms.progressWrap.find(.version).html(formAppInfo.version);uploadMod.doms.progressWrap.find(.version-code).html(formAppInfo.version_code);uploadMod.doms.progressWrap.find(.progress).css(width, 0);uploadMod.doms.progressWrap.find(.num).html(0);uploadMod.doms.progressWrap.find(.size).html(0);// 设置上传接口参数uploadMod.uploadXHR data;$(e.target).fileupload(option,formData,formAppInfo);data.submit();}).catch(function (err) {uploadMod.doms.progressWrap.hide();uploadMod.doms.uploadErr.html(文件解析错误请重新上传);data.abort();});// console.error() 监控处理consoleError window.console.error;window.console.error function () {consoleError consoleError.apply(window, arguments);for (var info in arguments) {if (arguments[info] File format is not recognized.) {$(#app_parse).html(p stylecolor:red;由于您上传了非真正的 APK 文件导致脚本解析出错即将重新刷新页面给您带来不好的体验敬请原谅/p);setTimeout(function () {history.go(0);}, 3000);return false;}}};
},
fileUpload: function(el) {$(#upload_input).fileupload({url: http://localhost:80/jq-drag-upload-apk-parse/upload.php,dataType: json,multi: false,add: uploadMod.methods.fileCheck,paste: function () { return false; },done: function(e, data) { // 上传成功回调var result data.result;if (result result.flag result.data) {uploadMod.doms.uploadErr.html(result.msg || 上传成功);uploadMod.data.selectedAPK result.data;uploadMod.methods.renderHistory(result.data);} else {uploadMod.doms.progressWrap.hide();uploadMod.doms.uploadErr.html(result.msg || 上传失败);}},fail: function(e, data) {if (data.errorThrown abort) {uploadMod.doms.uploadErr.html(已取消上传可重新上传);} else {uploadMod.doms.uploadErr.html(上传失败请重新上传);}},progressall: function(e, data) {var progress parseInt(data.loaded / data.total * 100, 10);uploadMod.doms.progressWrap.find(.progress).css(width, progress %);uploadMod.doms.progressWrap.find(.num).html(progress);uploadMod.doms.progressWrap.find(.size).html(bytesToSize(data.bitrate));function bytesToSize(bit) {if (bit 0) return 0 B;var bytes bit / 8;var k 1024,sizes [B, KB, MB, GB, TB, PB, EB, ZB, YB],i Math.floor(Math.log(bytes) / Math.log(k));return (bytes / Math.pow(k, i)).toPrecision(3) sizes[i];}}})
}, php 环境简单搭建 下载 xampp 集成环境包进行安装在 demo 项目解压拷贝到安装目录下的 htdocs 的目录下我的目录是 C:\xampp\htdocs\jq-drag-upload-apk-parse由于 php 上传有限制需要改文件C:\xampp\php\php.ini需要修改的点 max_execution_time 0默认 30 秒0 为无限制post_max_size 500M默认 2Mupload_max_filesize 100M默认 8Mps参考PHP上传大小限制修改最后点击安装目录下的(C:\xampp)的 xampp.control.exe 打开界面在打开界面中将 Apache 对应的 Actions 开启在浏览器窗口输入http://localhost/jq-drag-upload-apk-parse/index.html即可完整查看 demo 效果源码地址转载于:https://www.cnblogs.com/EnSnail/p/10439281.html
