form表单提交上传图片

上传图片我首先想到的是利用这个插件，webupload LUploade这类插件大多支持图片预览，断点/分片上传，功能比较丰富，但是由于后台原因我需要利用form表单进行上传图片，所以就整理了一下关于图片上传的几种方式：

1.form表单上传图片

表单上传遇到了一下几个问题：

（1）进行表单提交时，无法获取返回值

（2）表单提交会进行页面刷新

为了解决这个问题，我想到了利用iframe进行解决，在form元素上直接添加target属性，使提交跳转页面直接跳转到iframe中，阻止页面进行跳转，返回结果也会呈现在 iframe框架之中，我们可以去除iframe中的返回值，前提是必须在同一个域名下。这样我们获取返回值就会拥有局限性。还好我反降了另外一种方法，jquery中jqueryj.form.js表单提交插件。我们可以直接这样来获取表单返回值。

form表单提交注意事项：

(1).提供form表单，method必须是post。

(2).form表单的enctype必须是multipart/form-data。

javascript学习交流群：4538335s's's's'sssssssssssssss54

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，源余表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：

application/x-www-form-urlencoded：在发送前编码所有字符(默认)(空格被编码为’+’，特殊字符被编码为ASCII十六进制字符)。

multipart/form-data：不对字符编码。在使用包含文件上传控裤裂闭件的表单时，必须使用该值。

text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：

method=’get’ 编码后的表单内容附加在请求连接后，

method=’post’ 编码后的表单内容作为post请求的正文内容。

(3).提供input type="file"上胡裂传输入域。

2.ajax无刷新上传 

ajax和FormData可实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的

FormData接口。通过FormData对象可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。

ajax无刷新上传

Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。

3.各类插件的使用：

webupload LUPloader

文件上传有两种方式

1.基于文件处理为文件流然后然后传给返裤服务器，这个我们一般是用form-data来处理的，我们把文件流信息放到form-data里面，把form-data传给我们的服务器。然后服务器拿到form-data相关的数据做处理。

2.客户端需要把文件转化为base64位，转化为base64然后传给服务器，服务器在转化为文件

VUE elementUI 表单上传

在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。

1.图片上传模板

2、常用方法介绍

1、在实现自定义上传的:auto-upload设为"false"时before-upload将会无效，此时如要验证文件类型或者大小此处使用on-change的方法，在on-change方法中判断图片类型、大小，如果符合要求加入到pthotoLists中，不符合则移除

2、表单点击提交进行验证以及文件自定义上传将文件通过参数传递

1、将form表单元素的name与value进行组合，实现表单数据做烂的漏胡简序列化，从而减少表单元素的拼接，提高工作效率

3、通过append方法进行添加文件和数据

4、pPostFile为接口提交方式相当于axios

action为 提交的地址（接口名称）

formDataObj为表单中提交的所有参数（内容）

hearder即为header中需要的参数

form表单中上传图片，传输失败，原因：

form元素设置属性enctype

enctype就是encodetype就是编码类型的意思。

multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等闭老二进卖早制数据的意思。

需要注意的是：

默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。

application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式轿配升的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。

---