首页 > 代码库 > html5图片异步上传/ 表单提交相关
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
html5图片异步上传/ 表单提交相关