Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >使用form、FormData进行的文件提交。

使用form、FormData进行的文件提交。

jacklove
jackloveasal
2018-06-11 22:38:453107semak imbas


一、ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e

    在进行文件提交的说明之前,我们先来回顾一下form标签。form有很多属性,在这里我仅说明以下两个属性:

    1、method (enctype为‘application/x-www-form-urlencoded’的情况)

    大多数情况只会用到GET和POST。

        ①GET:在使用GET进行表单提交时, 用户代理(浏览器)会自动按照name=value对每一个input组件进行处理(对name和value分别使用encodeURIComponent进行编码,然后使用‘=’连接编码后的键值对,多个键值对之间使用‘&’进行连接)从而产生一个查询字符串,连接在url的后面。

        ②POST:POST同样会生成一个和GET一样的字符串,只不过这个字符串是在http请求头中写入的,而不是加到url的后面。


两者主要区别:

    GET提交数据的大小有限制,一般是2kb,而POST理论上没有限制(不过实际大小在2GB左右)。

2、enctype

    上面提到,form表单的默认值为‘application/x-www-form-urlencoded’,这就是enctype的三个值的其中之一,接下来我们详细讨论一下这三个值。

    ①application/x-www-form-urlencode:表单提交的默认值,POST和GET对应的行为在上面已经讨论过,这里不再赘述;

    ②text/plain: 取这个值时,表单的值将不会进行编码,而是使用纯文本的方式提交到后台server,这个值基本没人用,因为在进行文件的提交时,不能提供对二进制数据的良好支持。

    ③multipart/form-data: 当enctype使用该选项时,浏览器将不会对字符进行编码,取而代之的是:以控件(input等)为单位进行分割,为每个控件加上Content-Disposition:form-data、name(input对应的name),filename(如果提交的是文件会有改字段),以及Content-Type(和上一个字段相同,提交文件时存在):文件类型(很容易伪造)。并且还会加上boundary(分隔符,不同浏览器不同,每次提交也不同)



最终这些信息会被整合到一起,编码为一条消息提交到server(二进制数据形式)。

需要注意的是:由于主要的用途是进行文件的上传,对上传的大小有一定要求,所以method只能选择为POST,若使用GET进行上传,则只会提交文件的一个假路径。

该选项是上传文件时必须使用的选项,将enctype设置为"multipart/form-data"后就可以使用a2dc5349fb8bb852eaec4b6390c03b14进行文件上传了,下面是一个demo示例:

  1. 3b541b853c589f991d76ac2b551314c7  

  2.   0aa6305f7f155e28f4ba272adbc1203f  

  3.   62ae34026680e75b954aa285f1497df2  

  4. d098084c41ae3abefd9f7872f829e48d  

除了使用form表单进行文件的提交,平常更多的是无刷新页面的ajax,下面来看看如何使用ajax无刷新提交文件!


二、FormData

FormData是ES提供的一个API,使用它可以实现ajax的文件提交:

   下面来看FormData的使用方法:


    var formData = new FormData();   //创建实例,可以传入form对应的DOM节点作为参数,则表单中的数据就会保存到formData实例中。

    formData.append(name, value);   //使用方法append,传入对应的键和值

    // 其他代码

    最后将form实例扔到xhr.send();中即可。

    xhr.send(formData);

var xhr = new XMLHttpRequest();
//使用FormData构造函数创建一个FormData的实例 
var formData = new FormData(); 
// formData.append('file0', oInput.value);
//注意,这里的value不是普通的表单value,而是一个file对象 
formData.append('file0', oInput.files[0]); 
xhr.open('POST', 'http://localhost:8080');  
xhr.onload = function(){  
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {  
    console.log(xhr.responseText);  
  }  
};
//form表单的默认值为①,而FormData的默认值为multipart/form-data,所以不用画蛇添足的去修改请求头  
//xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;multipart/form-data&#39;);
xhr.send(formData);


上面有提到,传入append的值,不是普通的input的value,而是一个file对象,有关file对象的知识限于篇幅暂不讲解,有兴趣可以自行百度。

而除了这些,对文件的操作除了一般的小体积文件,更多的则是类似于视频网站对视频这种大型文件的操作,仅仅了解这些是不足以完成这些工作的。还要学习有关的API和深入理解blob对象。 大家可以自己下去学习, 有关这方面的总结我会在以后发表。

本文讲解了使用form、FormData进行的文件提交相关内容,更多相关内容请关注php中文网。

相关推荐:

JQuery中DOM操作——wrap

django 使用 request 获取浏览器发送的参数

React this绑定的几点思考

Atas ialah kandungan terperinci 使用form、FormData进行的文件提交。. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn