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