移動端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

疑難解答

圖片精選

網友關注