zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Linux下用命令格式化U盘
    ABAP
    [Java 并发] Java并发编程实践 思维导图
    html和css实现一级菜单和二级菜单学习笔记
    小贝_mysql建表以及列属性
    Android.mk具体解释
    Maven之——坐标和依赖(上)
    让 Nginx 支持 WAF 防护功能web防火墙
    EZHTTP首页、文档和下载
    http://www.sshguard.net/
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6194121.html
Copyright © 2011-2022 走看看