表单文件上传

FormData对象使用一些键值对来模拟一个完整的表单,然后使用ajax发送这个FormData对象,后端便可以拿到表单中上传的文件。

前端处理

HTML代码

1
2
3
<form>
<input type="file" id="uploadFile" name="file">
</form>

如果只想上传图片:

1
<input id="uploadFile" type="file" name="file" accept="image/png,image/gif"/>

可配置属性:

  • accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。
  • multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。

常用MIME类型

后缀名MIME名称
*.3gppaudio/3gpp, video/3gpp
*.ac3audio/ac3
*.asfallpication/vnd.ms-asf
*.auaudio/basic
*.csstext/css
*.csvtext/csv
*.docapplication/msword
*.dotapplication/msword
*.dtdapplication/xml-dtd
*.dwgimage/vnd.dwg
*.dxfimage/vnd.dxf
*.gifimage/gif
*.htmtext/html
*.htmltext/html
*.jp2image/jp2
*.jpeimage/jpeg
*.jpegimage/jpeg
*.jpgimage/jpeg
*.jstext/javascript, application/javascript
*.jsonapplication/json
*.mp2audio/mpeg, video/mpeg
*.mp3audio/mpeg
*.mp4audio/mp4, video/mp4
*.mpegvideo/mpeg
*.mpgvideo/mpeg
*.mppapplication/vnd.ms-project
*.oggapplication/ogg, audio/ogg
*.pdfapplication/pdf
*.pngimage/png
*.potapplication/vnd.ms-powerpoint
*.ppsapplication/vnd.ms-powerpoint
*.pptapplication/vnd.ms-powerpoint
*.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
*.rtfapplication/rtf, text/rtf
*.svfimage/vnd.svf
*.tifimage/tiff
*.tiffimage/tiff
*.txttext/plain
*.wdbapplication/vnd.ms-works
*.wpsapplication/vnd.ms-works
*.xhtmlapplication/xhtml+xml
*.xlcapplication/vnd.ms-excel
*.xlmapplication/vnd.ms-excel
*.xlsapplication/vnd.ms-excel
*.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
*.xltapplication/vnd.ms-excel
*.xlwapplication/vnd.ms-excel
*.xmltext/xml, application/xml
*.zipaplication/zip

javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#uploadFile').on('change',function(e){
var file = this.files[0];

var formData = new FormData();
formData.append('file',file);

$.ajax({
url: '/webgl/upload/zip',
type: 'post',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(res){
//
}
})
})

这里我是在文件被选择上传后就会立即触发ajax上传文件事件,而表单中其他字段我没有使用FormData对象,所以<form>标签没有添加enctype="multipart/form-data"属性。

注:

  • processData设置为false。因为data值是FormData对象,不需要对数据做处理。
  • cache设置为false,上传文件不需要缓存。
  • contentType设置为false

nodejs代码

multer模块

我使用了multer模块,更多信息。初始化multer模块配置

1
2
3
4
5
6
7
8
9
10
11
12
var storageZip = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'public/uploads/zip') //文件存储路径
},
filename: function(req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.zip') //对文件重新命名,防止文件名冲突
}
})

var uploadZip = multer({
storage: storageZip
});

路由配置

1
2
3
app.post('/webgl/upload/zip', uploadZip.single('file'), function(req, res) {
res.json(req.file)
})
  • 这里single()参数名就是使用FormData.append()方法添加时的文件名,这里我用的是file
  • 上传结束之后,会把file对象返回给前端,file对象会包含文件名等信息。
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理