学习文件上传，从入土到精通

在学习一样新东西前，我们总是想，它能为我们带来什么，又或者说我们能够用它来实现什么。

• 通过上传文件，从而实现用户间文件的传递（例如学生需要将word文档提交给老师）
• 通过上传文件，让图片或者音频能够正确地表现在浏览器中
• 通过上传文件，实现对文件的处理（图片的滤镜效果，压缩等等

这里有3种我所在用的文件上传的方法。对于每个方法，我都会有一个简单的demo来演示

利用input控件

    这种方法是最为简单和便利的方法。

< form action= "./serve.php" method= "post" enctype= "multipart/form-data" >

     < input type= 'file' name= 'pic' id= 'pic' >

< button >submit </ button >

</ form >

观察这一段代码和普通的文本数据提交有什么区别。enctype='multipart/form-data'   这句或许很多人都没有看见过。也正是这句话使得文本能够正常提交。并且，规定需要使用post的方式而非get

对HTTP有所了解的读者可能知道ContentType这个实体头部，它用于指定数据的媒体类型。对于普通的表单提交，enctype的默认值为'application/x-www-form-urlencoded'。这些都是MIME类型。对于ContentType和MIME类型在你所不知道的ContentType中介绍.

但是这种通过input控件的方式最大的缺点在于它不是异步，并且不能够按照自己的需求上传某些数据。接下来就介绍一下通过原生JavaScript实现ajax上传文件

原生ajax

//html

< form >

< input type= 'file' name= 'pic' id= 'pic' >

</ form >

< button onclick= 'submit()' >submit </ button >

//javascript

function submit(){

var form = document. getElementsByTagName( 'form')[ 0]

var filePic = document. getElementById( 'pic'). files[ 0]

var data1 = new FormData( form)

var data2 = new FormData()

data2. append( 'pic', filePic)

var xhr = new XMLHttpRequest()

xhr. onreadystatechange = function(){

//event

}

xhr. open( 'post', './serve.php')

xhr. send( data1)

// xhr.send(data2) the result is the same as the above statement

}

首先，在这里使用到了一个FormData对象

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHTTPRequest.send() method. 

意思为FormData API 提供了一种轻松构造一组模拟表单字段 键/值对的方法。因为服务器与前端交互通常以key/value 进行。

简单描述FormData使用方法

• 通过new FormData( formObject )  将该form元素内input, textarea元素进行序列化，为key:value (key为attr的name ， value为input的value)
• 通过formdataObject.append ( name,  value) 将一对以name为键,value为值的映射添加到对象中

你或许会疑惑为什么不需要在设置ContentType或者enctype呢，这是因为FomeData默认contenType='multipart/form-data'了

说完原生JavaScript，说说大家都在用的jQuery

Jquery

$. ajax({

url: './serve.php',

type: 'post',

data:data1,

contentType: false, //important the function is let jquery not to set contentType

processData: false, //important the function is let jquery not process the data into string

cache: false， // file submit don't need

            success: function(){

                //...

            }

})

如果熟悉了原生JavaScript，相信对这个demo就很容易理解了

思考：

1. 对于上述demo都是通过input控件实现的，读者能否用拖曳的方法来实现文件的选择呢？

2.能不能通过一个进度条来显示上传文件的进度呢？

3.对于用户手动的选择文件已经很容易了，但是对于在网页录音的文件又该怎么上传呢？

问题一二参考代码，问题三思路，了解一下

参考文献:

文件各种上传，离不开的表单

using files from web applications