小编：简介 文件上传是任何web应用程序中非常复杂的一部分。各种类型、大小的文件被上传到服务器。有时我们的文件可能非常大，这可能需要大量的时间来上传。如果我们能为用户提供可
简介
文件上传是任何web应用程序中非常复杂的一部分。各种类型、大小的文件被上传到服务器。有时我们的文件可能非常大，这可能需要大量的时间来上传。如果我们能为用户提供可恢复上传的便利，也许锦上添花会有所帮助。如果用户认为上传可能需要相当长的时间，那么他可能会决定暂停上传，然后再继续。这将允许用户自由操作，而不是受到应用程序不灵活的限制。
HTML5文件API
HTML5文件API对文件等的处理和发送到服务器的方式带来了很大的改变。它给客户端很大的权力来处理选定的文件，并留有余地来决定客户端需要的格式等，虽然，API不会马上解决我们的问题，华为云优惠券，但会给我们必要的工具来这样做。在我们深入研究解决当前问题之前，必须对API做一个简单的介绍。
API提供了两个接口来访问本地文件系统中的文件：
对于我们上传单个文件并使上传可恢复的示例问题，上述接口足够。
浏览器支持文件
我们可以检查支持：
如果(window.File文件&& 窗口。水滴&& window.FileReader文件读取器){
//很好。支持文件API
}
现在我们需要选择一个文件，异步读取它，然后尝试上传到服务器。我们使用file接口得到的file对象是对文件系统上实际文件的引用。FileReader对象读取file对象的内容，一旦完成读取，就会触发FileReader对象的onload事件。现在，经云服务器，我们有了内容，应该继续上传。FileReader有几种异步读取文件的方法：
.myDiv{
background:url（url到外部图像）；
}
这可以使用数据url（更好/更智能的方式）来完成。
.myDiv{
background:url(数据：image/gif；base64，NHLKJDSLJFSFIRUUUUURYEEDDHAODSALKDNWE987794574987598930293KHKANHLKWKL$$SF34）；
}
url属性中提供的值是数据url。这节省了获取外部资源的大量HTTP请求，因此提高了性能。读取操作完成后，将触发读卡器对象上的onload事件，从而访问读取的数据。
可以随时使用abort（）方法中止读卡器。这将停止正在进行的读取操作。本文可以使用readAsDataUrl（）或readAsBinaryString（）。然而，readAsDataUrl（）提供的优点是，数据URL可以作为src属性，例如为上传的文件（如果是图像）或直接下载设置缩略图。因此，我们将继续使用readAsDataUrl（）。此外，我们将使用localStorage对象来存储和记住当前上载的文件。这将作为一个上下文，可以在恢复状态期间使用（在我们继续前进的过程中会很明显）。也，我们将使用HTML5 FormData（）API与服务器通信/发送数据。
我们的HTML和相应的JavaScript可以设置如下：
HTML:
pause
resume
JavaScript:
/**创建Ajax请求的助手函数*/
函数initiateXHR（object，method，url，mode，数据库云系统，fileDataURL，fileName，headersObject）{
//创建对象
object=null；
object=new XMLHttpRequest（）；
对象.打开（方法，url，true）；
//追加数据
var formData=new formData（）；
表单数据.append（'file'，fileDataURL）；
表单数据.append（'mode'，mode）；
//为xhr对象添加事件监听器
添加监听器（object）；
//如果有请求头，则添加请求头
for（headersObject中的var头）
object.setRequestHeader文件（标题，标题对象[标题]）；
对象.发送（formData）；
}
/**helper函数向Ajax请求添加侦听器*/
函数addListener（object）{
对象.onload=函数（）{
如果(对象.readState==4）{
如果(对象状态==200）{
如果(对象.响应===="文件上传成功"| |对象.响应=="文件追加成功"）{
/**注意一次上载完成后，请确保删除
*本地存储项。
*/
localStorage.removeItem文件（'currentFile'）；
}
}
}
}
object.oner错误=function（）{
//xhr error
}
}
var xhr=null，\u xhr2=null，\u reader=null；
/**文件输入更改处理程序*/
文档.getElementById（'uploadFile'）.addEventListener（'change'，函数（e）{
//选择了某个文件。获取文件并读取它。
var file=此.files[0]；//这是对文件系统上文件的文件引用
var fileSize=文件大小；
var文件名=文件名；
_reader=new FileReader（）；
_reader.readAsDataURL（文件）；
_读卡器.onload=函数（事件）{
var数据=event.target.result事件目标结果; //包含读取内容
//将文件存储到localStorage对象中以备将来使用
localStorage.setItem（'currentFile'，JSON.stringify文件（{
‘fileReference’：文件，广州阿里分销，
‘fileSize’：文件大小，
‘fileName’：文件名
}）；
/**发起XHR请求上传到服务器*/
发起EXHR（XHR，"发布"uploadFileToServer.php"，"upload"，data，fileName，{X-fileName'：fileName}）；
}
以上的基本设置将读取所选文件并上载到服务器。
文章来源：www.vmchk.com
