移动端HTML5实现文件上传

2019-10-26 17:18:17

字体：大中小

来源：转载

供稿：网友

PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。

用的技术主要是：

ajax

FileReader

FormData

HTML结构：

</form> <div class="thumb"></div>

</div>

已经封装好的upload.js，依赖zepto

JavaScript Code复制内容到剪贴板

(function($) { $.extend($.fn, {

fileUpload: function(opts) { this.each(function() {

var $self = $(this); var doms = {

"fileToUpload": $self.find(".fileToUpload"), "thumb": $self.find(".thumb"),

"progress": $self.find(".upload-progress") };

var funs = { //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件

"fileSelected": function() { var files = (doms.fileToUpload)[0].files;

var count = files.length; for (var index = 0; index < count; index++) {

var file = files[index]; var fileSize = 0;

if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';

else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

} funs.uploadFile();

}, //异步上传文件

uploadFile: function() { var fd = new FormData();//创建表单数据对象

var files = (doms.fileToUpload)[0].files; var count = files.length;

for (var index = 0; index < count; index++) { var file = files[index];

fd.append(opts.file, file);//将文件添加到表单数据中 funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt

} var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度 xhr.addEventListener("load", funs.uploadComplete, false);

xhr.addEventListener("error", opts.uploadFailed, false); xhr.open("POST", opts.url);

xhr.send(fd); },

//文件预览 previewImage: function(file) {

var gallery = doms.thumb; var img = document.createElement("img");

img.file = file; doms.thumb.html(img);

// 使用FileReader方法显示图片内容 var reader = new FileReader();

reader.onload = (function(aImg) { return function(e) {

aImg.src = e.target.result; };

})(img); reader.readAsDataURL(file);

}, uploadProgress: function(evt) {

if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total);

doms.progress.html(percentComplete.toString() + '%'); }

}, "uploadComplete": function(evt) {

alert(evt.target.responseText) }

}; doms.fileToUpload.on("change", function() {

doms.progress.find("span").width("0"); funs.fileSelected();

}); });

} });

})(Zepto);

上一篇：移动端网页大小自适应的实现方法

下一篇：HTML外部引用CSS文件不生效原因分析及解决办法

学习交流

电脑开不了机的原因和解决办法

电脑开不了机的原因和解决办法...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注