最近有个移动端文件上传的需求,不用面向中低端手机用户,所以还是可以用 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); }); });