移动端通过HTML5实现文件上传功能

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

用的技术主要是：

ajax
FileReader
FormData

HTML结构：

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

立即学习“前端免费学习笔记（深入）”；

(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);

调用方法：

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

下载

$(".camera-area").fileUpload({   
        "url": "savetofile.php",   
        "file": "myFile"  
      });

PHP部分：

相关文章：

php中文件上传图片

JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

HTML5应用之文件上传的详细介绍