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图片异步上传/ 表单提交相关的更多相关文章

  1. jquery运用FormData结合Ajax异步上传表单,超实用

    首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...

  2. layui 图片上传+表单提交+ Spring MVC

    Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML: <div class="layui-form-item"> < ...

  3. 原生js封装ajax:传json,str,excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  4. 【Flask】 结合wtforms的文件上传表单

    表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...

  5. ajax上传表单的俩种方式

    1.用h5对象上传表单(图片) var formData = new FormData(); formData.append("authenticity_token", '1212 ...

  6. 上传漏洞科普[1]-文件上传表单是Web安全主要威胁

    为了让最终用户将文件上传到您的网站,就像是给危及您的服务器的恶意用户打开了另一扇门.即便如此,在今天的现代互联网的Web应用程序,它是一种 常见的要求,因为它有助于提高您的业务效率.在Facebook ...

  7. bootstrap上传表单的时候上传的数据默认是0 一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  8. 使用ajax上传表单(带文件)

    在使用form表单的时候上传文件+表单,会使得页面跳转,而在某些时候不希望跳转,只变化页面中的局部信息 通过查找资料,可以使用FormData进行ajax操作. FormData介绍:XMLHttpR ...

  9. HTML5 文件异步上传 — h5uploader.js

    原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...

随机推荐

  1. IT人经济思维之投资 - 创业与投资系列文章

    前面笔者写过一个文(IT从业者的职业规划),主要通过笔者的从业道路的经验,介绍了IT从业者的职业选择道路问题,主要从技术.业务和管理三大方面进行了描述.然后,通过文(IT从业者的职业道路(从程序员到部 ...

  2. #数据技术选型#即席查询Shib+Presto,集群任务调度HUE+Oozie

    郑昀 创建于2014/10/30 最后更新于2014/10/31   一)选型:Shib+Presto 应用场景:即席查询(Ad-hoc Query) 1.1.即席查询的目标 使用者是产品/运营/销售 ...

  3. Django入门

    Django文档: https://docs.djangoproject.com/en/1.10/ref/ 一.简单创建app 1.1 命令行创建project和app. django-admin s ...

  4. apache ab测试命令详解

    这篇文章主要介绍了apache性能测试工具ab使用详解,需要的朋友可以参考下   网站性能压力测试是服务器网站性能调优过程中必不可缺少的一环.只有让服务器处在高压情况下,才能真正体现出软件.硬件等各种 ...

  5. linux 命令之grep

    grep主要用来在文件中进行正则查找 通常都会将高亮颜色打开,方便阅读,为grep建立一个别名alias放到.bashrc等文件中: alias grep='grep --color=auto' 最常 ...

  6. 每天一个linux命令(2):cd命令

    1. 命令格式: cd [目录名] 2. 命令功能: 切换当前目录至dirName 3. 常用范例 3.1 例一:进入系统根目录 命令: cd / 输出: [root@localhost ~]# cd ...

  7. gdb脚本

    一.简介 作为UNIX/Linux下使用广泛的调试器,gdb不仅提供了丰富的命令,还引入了对脚本的支持:一种是对已存在的脚本语言支持,比如python,用户可以直接书写python脚本,由gdb调用p ...

  8. markdown学习/mou

    markdown编辑器mou markdown编辑器的使用很简单,mac平台选择课 MOU 这款比较轻的客户端. 使用也很方便,打开软件,->helo->mou help 就有各种示例,照 ...

  9. 【原】移动web页面支持弹性滚动的3个方案

    有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动we ...

  10. 第2章 Linux系统安装(3)_SSH连接Linux工具:SecureCRT和WinSCP

    4. SSH连接Linux工具 4.1 Linux网卡配置 (1)临时配置: ifconfig eth0 192.168.32.100 //给eth0网卡指定IP,写在ROM里的,关机会丢失. (2) ...