html5图片异步上传/ 表单提交相关

1 form 表单 get/post提交时候。 action地址（或者啥ajax的url地址）会涉及到跨域问题

　　　　常见跨域问题http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

　　举例：

第一种写法 相对路径

 $.get('localhost:8080/test_upload/aservlet', {

            }, function (data) {

            });

　　test_upload 为项目名

　　这里写的为相对路径，不会出现问题

第二种写法 绝对路径 
$.get('http://localhost:0880/test_upload/aservlet', {

            }, function (data) {

            });

localhost：是域名

127.0.0.1 啥对应的ip

这里会容易出问题：

1 注意协议一定要写（http://）

2 当 html或者jsp文件与项目都在eclipise里（运行在同一个服务器下）http://localhost 或者 http://127.0.0.1/ 或者 http://192.168.100.xx 都可以

但是当不在一个服务器下， aservlet在eclipise的tomcat运行， html在webstorm的服务器运行，则地址经测试只有写成http://127.0.0.1/可以，其余的都会跨域

2 异步上传图片的常见两种方法　　

1 html5之前用iframe（

这种技术有两个关键的地方:

　　　　1.form会指定target,提交的结果定向返回到隐藏的ifram中。(即form的target与iframe的name属性一致)。

　　　　2.提交完成后，iframe中页面与主页面通信，通知上传结果及服务端文件信息

）

2 html5 新方法用ajax（使用XMLHttpRequest2来进行真正的异步上传。

使用过AJAX的人都知道，XHR对象提供了一个onreadystatechange的回调方法来监听整个请求/响应过程。在XMLHttpRequest2级规范中又多了几个进度事件。有以下6个事件:

　　　　1.loadstart: 在接收到响应数据的第一个字节时触发。

　　　　2.progress: 在接收响应期间持续不断地触发。

　　　　3.error: 在请求发生错误时触发。

　　　　4.abort: 在因为调用abort()方法而终止连接时触发。

　　　　5.load: 在接收到完整的响应数据时触发。

　　　　6.loadend: 在通信完成或者触发error,abort,load事件后触发

）

参考 http://www.jb51.net/article/80512.htm

3 html5异步上传图片的常见两种方式以及上传要点　

　　方式1)依然是input 的type 等于file 方式

　　方式2）拖拽

　　　　要点

　　　　　　1 拖放可使用DataTransfer传递数据，该对象是非常有用的，因为在拖动目标元素时，可能会经过其它元素，我们可以用此传递信息；

　　　　　　API：

　　　　　　dragstart 被拖放元素开始拖放时

　　　　　　drag 被拖放元素拖放过程中

　　　　　　dragenter 拖放过程中鼠标经过的元素被拖放元素开始进入本元素时

　　　　　　dragover 拖放过程中鼠标经过的元素本元素内移动

　　　　　　drageleave 拖放过程中鼠标经过的元素离开本元素

　　　　　　drop 拖放的目标元素拖动的元素放到了本元素中

　　　　　　dragend 拖放的对象拖放结束

　　上传要点：

　　　　FIleReader接口

　　　　filereader接口，可将文件读入内存，有了这个东东我们就可以很舒服的做图片预览了，但他的公用不止如此。

　　　　filereader的四个方法：

　　　　readAsBinaryString 将文件读取为二进制码——通常我们将数据传给后端；

　　　　readAsText 将文件读取为文本——读取文本内容；

　　　　readAsURL 将文件读取为DataURL——一般是小文件，图片或者html；

　　　　abort 中断读取，因为文件过大等待时间就很长了

　　　　filereader接口事件：

　　　　onabort 读取中断触发；

　　　　onerror 读取失败触发；

　　　　onloadstart 开始读取时触发；

　　　　onprogress 读取中

　　　　onload 读取成功时触发；

　　　　onloadend 读取完成后触发，无论成功失败；

参考

http://www.cnblogs.com/yexiaochai/archive/2013/04/16/3025240.html