基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

技术栈

  • jquery
  • 文件上传：jquery.fileupload，github 文档
  • apk 文件解析：app-info-parser，github 文档

参考：前端解析ipa、apk安装包信息 —— app-info-parser

支持功能

  • 点击或拖拽上传 apk 文件
  • 校验文件类型及文件大小
  • js 解析 apk 文件信息展示并通过上传接口提交给后端
  • 支持上传过程中取消上传
  • 支持上传成功显示上传信息
  • 支持解析、上传等友好提示
  • 支持从历史记录（所有已上传文件）中选择一个
  • 支持假文件处理，比如 .txt 文件改为 .apk 文件
  • 上传进度实时更新，百分比，B/s
  • 拖拽进入拖拽区时，高亮显示

demo 预览

说明

由于上传接口需要后端接口的支持，所以没法用静态页面展示完整的交互。因此，在这儿放个预览图。

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 style="color:red;">由于您上传了非真正的 APK 文件，导致脚本解析出错，即将重新刷新页面，给您带来不好的体验，敬请原谅</p>');setTimeout(function () {history.go(0);}, 3000);return false;}}
};

为了避免页面其它错误，导致脚本无法运行，因此做了页面刷新。

2. 拖拽上传，点击上传和拖拽上传绑定到一起

在做这个功能前，想到拖拽上传可以利用 H5 的拖拽功能及原生 js 的 file 文件上传实现，但需要处理兼容性问题。后来想到系统中已经引入了 jquery.fileupload 库，于是特地翻阅了文档，支持拖拽上传。因此采用该库实现拖拽上传功能。

html 布局如下：

<div class="upload-area" id="upload_area"><i class="icon-upload"></i><p class="upload-text">将安装包拖拽至此上传或 <em>选择文件</em></p><p class="upload-tip">支持 APK 文件，最大不超过 300 MB</p><input type="file" id="upload_input" name="file" accept="application/vnd.android.package-archive" data-size="300"/>
</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 style="color: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，默认 2M
    • upload_max_filesize = 100M，默认 8M
    • ps：参考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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/363706.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

POI获取WORD信息

POI获取WORD信息

最近由于工作需要&#xff0c;调研了一下关于poi获取word字体信息方面的方法&#xff0c;在这里mark一下。 首先word格式分为doc和docx&#xff0c;分别利用HWPFDocument和XWPFDocument对文档进行解析&#xff0c;话不多说&#xff0c;直接贴代码&#xff1a; 解析doc格式1 imp…
阅读更多...
安全性

安全性

•完全适用ASP.NET的认证机制 –可以使用FormsAuthentication •WebService方法可以操作Cookie –Impersonation –PrincipalPermissionaspx<form id"form1"runat"server"><asp:ScriptManager runat"server"ID"ScriptManager1&quo…
阅读更多...
调试以了解终结器

调试以了解终结器

这篇文章涵盖了Java内置概念之一&#xff0c;称为Finalizer 。 这个概念实际上是众所周知的&#xff0c;也是众所周知的&#xff0c;这取决于您是否有足够的时间来仔细研究一下java.lang.Object类。 就在java.lang.Object本身中&#xff0c;有一个名为finalize&#xff08;&…
阅读更多...
C++ constexpr变量和constexpr函数

C++ constexpr变量和constexpr函数

constexpr 类型变量必须用常量表达式或 constexpr 函数来初始化&#xff1a; constexpr int a10;　　 constexpr int ba10;　　 constexpr int cd();　　//当 d()为一个 constexpr 函数时才可以 constexpr 函数的形参和返回值都只能是字面型类型&#xff0c;且只能有一条 retur…
阅读更多...
Zookeeper实现注册与发现

Zookeeper实现注册与发现

1.Zookeeper的数据模型 (1) Zookeeper的数据模型&#xff0c;类似于树形结构&#xff1a; (2) Zookeeper的每一个节点成为称为Znode&#xff0c;主要用来存储数据。 data : 存储数据信息。acl : 记录Znode的访问权限。child : 当前节点的子节点引用。stat &#xff1a;包含Zn…
阅读更多...
class 命名规范

class 命名规范

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章摘自 penggelies07- 简书, super晴天 - CSDN 常见class关键词 布局类&#xff1a;header, footer, container, main, content, aside, page, section 包裹类&am…
阅读更多...
web策略类游戏开发(四)一个可以承载万人在线的架构

web策略类游戏开发(四)一个可以承载万人在线的架构

web策略类游戏开发(四)一个可以承载万人在线的架构 Webgame现在已经开始需要进入大统一服务器时代&#xff0c;每个游戏区域容纳的玩家数量将从现在的几万人发展到几十万人&#xff0c;因此在新的背景下&#xff0c;webgame如何处理大量用户的请求将成为问题。目前一台asp.net做…
阅读更多...
htc g7 android 4.4,HTC G7刷机,从WM手机刷到了安卓,开启了新的刷机体验....

htc g7 android 4.4,HTC G7刷机,从WM手机刷到了安卓,开启了新的刷机体验....

2011.0914.晚上22&#xff1a;00使用2010的教程刷机&#xff0c;降级时黑屏。使用老的教程&#xff0c;一开始降级从094降到0.83(2010技术)黑屏&#xff0c;但是未板砖&#xff0c;还有开机声音&#xff0c;无法控制机器。没办法&#xff0c;只能使用RUU技术&#xff0c;window…
阅读更多...
Java的编年史和低延迟

Java的编年史和低延迟

总览 我正在看Typesafe的Rolan Kuhn在介绍反应流方面的出色演讲&#xff0c;乍一看似乎与《纪事报》有一些相似的目标&#xff0c;但是当您深入研究细节时&#xff0c;对我来说显然有一些关键假设是根本不同。 关键假设 《纪事》设计的主要假设是 低延迟是您的问题&#xff0c…
阅读更多...
复制物料时不复制安全库存

复制物料时不复制安全库存

1.打开bos&#xff0c;选择物料-功能控制 2.把允许复制去掉 转载于:https://www.cnblogs.com/RogerLu/p/10441588.html
阅读更多...
CSS实现水平垂直居中

CSS实现水平垂直居中

1、需求分析 子元素在父元素中水平垂直居中 2、技术分析 基础的css、html 3、详细分析 如图: 3.1 HTML部分 如图所示&#xff0c;大边框内包含一个小边框两部分&#xff0c;设置一个父元素div和一个子元素div。 <div class"container">父元素<div class…
阅读更多...
2008/5/5

2008/5/5

go haywire 非常生气Imagination is the source of creation. 想象是创造之源.转载于:https://www.cnblogs.com/fishert/archive/2008/05/06/1184243.html
阅读更多...
鸿蒙3部曲先看哪部,讨论雪鹰与鸿蒙三部曲的关系

鸿蒙3部曲先看哪部,讨论雪鹰与鸿蒙三部曲的关系

1、相信番茄的每部小说出来&#xff0c;心里都在想这会不会是鸿蒙三部曲的最后一部呢&#xff0c;鸿蒙金榜最后一位掌控者呢。2、但是隔了这么多部&#xff0c;番茄依旧未写&#xff0c;第三部&#xff0c;让人不禁思考&#xff0c;会不会第三部是番茄的封山之作呢。3、如果说前…
阅读更多...
python装饰器概念与应用

python装饰器概念与应用

格式一&#xff1a;装饰器外层不传参&#xff0c;内层传参 user_status False # 用户登录了就把这个改成Truedef login(func): # 把要执行的henan模块从这里传进来def inner(*args, **kwargs): # 再定义一层函数&#xff0c;参数为henan的参数_username "alex" …
阅读更多...
从Java连接到Cassandra

从Java连接到Cassandra

在我的帖子Hello Cassandra中 &#xff0c;我研究了如何下载Cassandra NoSQL数据库并使用cqlsh连接到Cassandra数据库。 在本文中&#xff0c;我将介绍从Java客户端连接到Cassandra数据库的基础知识。 尽管有几种可用于从Java访问Cassandra数据库的 框架 &#xff0c;但我将在…
阅读更多...
Django---Model操作

Django---Model操作

一、字段 1 AutoField(Field)2 - int自增列&#xff0c;必须填入参数 primary_keyTrue3 4 BigAutoField(AutoField)5 - bigint自增列&#xff0c;必须填入参数 primary_keyTrue6 7 注&#xff1a;当model中如果没有自增列&#xff0c;则自动会创建…
阅读更多...
8. Action过滤

8. Action过滤

Action过滤原文: http://quickstarts.asp.net/3-5-extensions/mvc/ActionFiltering.aspx1. 介绍一般Action与用户动作是一对一的关系,用户的某一个动作对应一个特定的Action.然而,有时你可能会希望在Action执行的前后执行指定的操作,MVC中可以通过Action过滤器来实现这个功能.A…
阅读更多...
android运行时状态,Android 如何保存Android 运行时状态

android运行时状态,Android 如何保存Android 运行时状态

Android 如何保存Android 运行时状态使用 SaveInstanceState去保存运行时数据首先&#xff0c;我们需要重写一下系统的public void onSaveInstanceState(Bundle savedInstanceState)方法并在onSaveInstanceState方法中添加需要保存的数据。最后我们可以在onRestoreInstanceStat…
阅读更多...
程序文件分类及编写要求

程序文件分类及编写要求

一级&#xff1a;管理体系手册 由质量管理部负责编制&#xff0c;最高管理者批准后发布生效。举例如&#xff1a;XX公司管理手册 二级&#xff1a;管理体系程序文件 由各相关部门进行编写&#xff0c;质量管理部体系负责人审核通过各部门评审会签&#xff0c;由管理者代表批…
阅读更多...
仿制药的美丽与陌生

仿制药的美丽与陌生

最近&#xff0c;我正在为Oracle认证专家Java SE 7程序员考试做准备&#xff0c;而我恰巧在Java泛型领域遇到了一些看起来很奇怪的结构。 但是&#xff0c;我也看到了一些巧妙而优雅的代码。 我发现这些示例值得分享&#xff0c;这不仅是因为它们可以使您的设计选择更容易&…
阅读更多...
最新文章

Copyright @ 2022~2023