通过代码示例跟我学html5相关技术——html5文件上传技术及应用实例

通过代码示例跟我学html5相关技术——html5文件上传技术及应用实例内容摘要：

此时不需要在 form标签中增加 enctype=multipart/formdata属性定义，如 form id=form1 method=post action=。 （ 2） 应用带表单参数的 FormData 对象的构造函数创建 FormData 对象 取得 form 对象，作为参数传入到 FormData 对象。 var formElement = (someOneFormTagID)。 var currentFormData = new FormData(formElement )。 但此时的 form标签必须要增加 enctype=multipart/formdata 定义，如： form enctype=multipart/formdata method=post name=fileinfo （ 3） 发送 BLOB 参数 var currentFormData = new FormData()。 var oFileBody = a id=ab id=bhey!/b/a。 // Blob 对象包含的文件内容 var oBlob = new Blob([oFileBody], { type: text/xml})。 currentFormData .append(webmasterfile, oBlob)。 XMLHttpRequest 对象中的 uploadProgress 属性 应用 XMLHttpRequest 的事件监听的目的是为了获取文件上传的真实情况，主要是其uploadProgress 属性。 在该文件上传进度相关的事件处理方法，在该事件处理方法中可以检验上传文件的尺寸、上传进度是否可计算，并使用 和 等属性可计算出已上传百分之多少的数据。 function uploadProgressEventFunction(event) { if () { var percentComplete = ( * 100 / )。 (39。 progressNumber39。 ).innerHTML = () + 39。 %39。 } else { (39。 progressNumber39。 ).innerHTML = 39。 无法计算出文件上传杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 8/16 页 8 的进度值 39。 } } FileReader 对象 （ 1）主要的功能 通过 FileReader 对象可以从内存读取上传文件内容 —— 用来把文件读入内存，并且读取文件中的数据。 FileReader 接口提供了一个异步 API，使用该 API 可以在浏览器主线程中异步访问文件系统，读取文件中的数据并赋予 JS 中的某个变量。 （ 2）主要的事件和方法 FileReader 对象 提供 很 多事 件， onload 、 onError 以 及四 种读 取数 据的 函 数readAsBinaryString()、 readAsText()、 readAsArrayBuffer()、 readAsDataURL(),result 属性表示文件内容。 但该对象只有当读操作执行完成后才有效，应用 FileReader 对象可以实现在上传图片时的预览图片的效果 —— 主要用到 FileReader 的 readAsDataURL 方法，通过将图片数据读取成 Data URL 的方法，将图片展示出来。 （ 3）应用 FileReader 的 readAsDataURL 方法实现预览上传的本地图片文件 要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的 URL 返回到前端，前端通过 这个 URL 来显示图片。 但现在则可以应用 FileReader 的 readAsDataURL 方法实现预览上传的本地图片文件。 var imageType = /image.*/。 if ((imageType)) { var reader = new FileReader()。 = function (e) { /** 首先清除动态添加的 img标签 */ var previewImageNode = (previewImageImageTagID)。 if (previewImageNode) { (previewImageNode)。 } var previewImageURL=。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 9/16 页 9 var img = new Image() = dataURL。 = previewImageImageTagID。 /** 注意： CSS 中的 maxwidth 属性在 JS 中为 maxWidth */ =160px。 (39。 Imagecontainer39。 ).appendChild(img)。 }。 (fileToUploaded)。 从上面的代码中可以了解到，通过调用 FileReader 的 readAsDataURL 接口， 将启动异步加载文件内容，再通过给 reader 监听一个 onload 事件，当将数据加载完毕后，在 onload事件处理中，通过 reader 的 result 属性即可获得文件内容。 但采用动态创建 Image()对象的方法，在 IE 浏览器中图片显示将不正确，应该要采用如下的实现方式： var imageType = /image.*/。 if ((imageType)) { var reader = new FileReader()。 = function (e) { /** 首先清除动态添加的 img标签 */ var previewImageNode = (previewImageImageTagID)。 if (previewImageNode) { (previewImageNode)。 } /** 获得预览图片的 URL 地址 */ var previewImageURL =。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 10/16 页 10 /** 再动态创建出封装预览图。