移动端HTML5实现文件上传功能【附代码】

2020-04-24 18:48:53易采站长站整理

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

用的技术主要是:

ajax
FileReader
FormData

HTML结构:

JavaScript Code复制内容到剪贴板

<div class="camera-area">   
      <form enctype="multipart/form-data" method="post">   
        <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/>   
          <div class="upload-progress"><span></span></div>   
        </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++) {