学习笔记——FileReader，FormData

最近在做一个小小的demo，里面用到一个图片上传的功能，但是出现了一些小问题：

1.点击表单提交按钮时页面发生跳转；

2.无法预先预览图片；

思考：

为什么一点击提交页面就会跳转？

这是因为当我点击提交按钮是会触发submit事件，会把表单的元素的name与value组成一个请求字符串提交到后台，然后后台生成一个新的页面作为响应。

解决：

为了让其停留在原来的页面，我在页面中嵌入一个浮动框架iframe，并将表单的target=“iframe的名称”，这样服务器返回的页面就会在框架中打开，并且top页面不会跳转，还可以在返回的页面中生成上传的图片；

不过这样又有一个新的问题：如果刚刚上传的那个图片传错了，要修改那不是很麻烦？？

上网搜了一下发现html5有一个实现文件预览的方法FileReader。

作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 "提供一些读取文件的方法与一个包含读取结果的事件模型"。

通过这个方法可以调用其readAsDataURL方法 将上传的文件读取为Data URI形式保存在其result中，然后在页面中插入一个img节点就可以实现预览了。

这样做的好处：之前浏览上传的图片时上传完又再从服务器传回来，现在直接就在本地就可以预览了，减少了一次http请求，也比较人性化。

提升：

解决完页面跳转问题跟图片预览问题后，发现每提交一次就从服务器返回一张图片的页面性能很低，于是我决定用Ajax实现异步上传，这样只要局部刷新页面就可以了，还不用在页面中添加一个浮动框架，一举两得。

但是表单要提交的内容就必须我们手动添加，FormData对象提供了一个简单的方法将表单内容以键/值得形式保存起来，可以减少我们的工作量。

使用FormData方法：

1.

var formdata = new FormData();

formdata.append( "name" , "司徒正美" );

formdata.append( "blog" , "http://www.cnblogs.com/rubylouvre/" );

2.

var formobj =  document.getElementById( "form" );

var formdata = new FormData(formobj);

3.

var formElement = document.getElementById( "myFormElement" );

formData = formElement.getFormData();

formData.append( "serialnumber" , serialNumber++);

xhr.send(formData);
FileReader详解：
方法：
1.abort：中断读取文件
2.readAsBinaryString：将文件读取为二进制，该方法有一个参数：读取的文件名。
3.readAsDataURL：将文件读取为DataURL，该方法有一个参数：读取的文件名。
4.readAsText：将文件读取为文本形式，该方法有两个参数：文件名，解码方式（默认值为 UTF-8）。
事件：
1.onabort：中断时触发
2.onerror：出错时触发
3.onload：文件读取成功时触发
4.onloadend：读取完触发，无论成功或失败
5.onloadstart：读取开始时触发
6.onprogress：读取中
注意：文件的读取结果会被保存在实例的result属性中，无论读取成功与否，result都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果。
参考文献：
FileReader详解与实例---读取并显示图像文件
FormData对象