IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    移动端文件上传

    Alan发表于 2014-03-19 05:45:50
    love 0

    最近有个移动端文件上传的需求,不用面向中低端手机用户,所以还是可以用 HTML5 搞一搞,主要利用 XMLHttpRequest 2;后端我用的 Nodejs。主要在 iOS 6/7 和 Android 4.2+ 测试。

    input[type="file"] 可以选择手机里的文件,还可以调用拍照功能(某些浏览器不行),Form 表单如下:

    这里做单文件上传,多文件上传可以给 input[type="file"] 加个 multiple 属性便可。当触发 submit 事件提交:

    var Upload = (function(win, upload) {
    
      upload.submit = function() {
        var self = this,
          form = document.getElementById('form'),
          formdata = new FormData(form),
          xhr = new XMLHttpRequest();
    
        // xhr.upload 在 iOS Safari、 大部分 Android 4.0+ 的自带浏览器、Chrome 都支持
        xhr.upload.addEventListener("progress", self.onProgress, false);
        xhr.addEventListener("load", self.onSuccess, false);
        xhr.addEventListener("error", self.onError, false);
        xhr.addEventListener("abort", self.onCancel, false);
    
        xhr.open('post', form.action, false);
        xhr.send(formdata);
      }
    
      // 可以在 onProgress 的时候处理进度条
      upload.onProgress = function(e) {
        if (e.lengthComputable) {
          var progress = Math.round(e.loaded * 100 / e.total) + '%';
          console.log('on progress: ', progress);
        }
      }
    
      upload.onError = function() {}
      upload.onCancel = function() {}
    
      // 上传完成
      upload.onSuccess = function() {}
    
      return upload;
    
    })(window, window.Upload || {});
    

    FormData,这是另一种针对 XHR2 设计的新数据类型。使用 FormData 能够很方便地实时以 JavaScript 创建 HTML

    。

    Server 端用了 formidable 这个中间件:npm install formidable。
    当然不用 formidable 也能处理文件上传。

    var fs = require('fs'),
      formidable = require('formidable');
    
    app.post('/upload', function(req, res) {
      var form = new formidable.IncomingForm(),
        data;
    
      // formidable 属性设置可以参考 github 上说明
      form.uploadDir = './uploads';
      form.encoding = 'utf-8';
      form.keepExtensions = true;
      form.maxFieldsSize = 1024 * 1024 * 50; // 50MB
    
      form.parse(req, function(err, fields, files) {
        console.log('on parse');
        res.writeHead(200, {'content-type': 'text/plain'});
        data = files.fileToUpload;
        res.end(JSON.stringify(data));
      });
    
      // 我们可以在文件上传完成后移到放置文件的目标目录
      form.on('end', function() {
        fs.renameSync(data.path, './uploads/'+ data.name);
      });
    });
    

    FYI:XMLHttpRequest2 新技巧



沪ICP备19023445号-2号
友情链接