上一篇文章讲了web上传图片的几种方法,主要是针对于单图上传,这一篇文章将讲述多图上传。
1.表单上传
除了上一篇文章提到的表单上传注意事项之外,多图上传需要用到<input>的multiple属性。
表单上传
2.ajax上传
ajax和FormData实现页面无刷新文件上传。
ajax上传
此种方式需要注意一个问题,就是上图ajax中processData和contentType的设置。若注释掉这两行代码,会如下错误,
报错
什么原因呢?在使用ajax上传文件时,在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。文件上传的method必须为post,但是文件上传与普通的post请求的区别有两点,一是请求头,文件上传必须设置contentType=multipart/form-data;二是请求体,带有文件上传的请求体中每个字段内容之间必须要使用分界符来隔开,普通的post请求直接以name="value"的形似发送。在 ajax中contentType和processData设置为false是为了避免JQuery对内容编码类型和数据进行操作,从而失去分界符,而使服务器不能正常解析文件。