移动手机中实现端文件上传的例子

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

代码如下	复制代码
<form id="upload-form" action="/upload" enctype="multipart/form-data" method="post"> <input id="selece-files" type="file" name="fileToUpload" /> <input id="do-upload" type="submit" value="上传" /> </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 <form>。

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

时间： 2024-10-26 19:35:54

移动手机中实现端文件上传的例子

移动手机中实现端文件上传的例子的相关文章

java中Spring MVC文件上传的例子

ASP.NET中常用的文件上传下载方法

急急急急急-在strurs2中怎么做文件上传的进度条

java 缩略图-Java中如何实现文件上传同时将文件首页生成缩略图保存

java中struts2实现文件上传下载功能实例解析_java

php文件上传的例子及参数详解

多文件上传的例子_php基础

多文件上传的例子

asp.net中Fine Uploader文件上传组件使用介绍_实用技巧