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图片异步上传/ 表单提交相关的更多相关文章
- jquery运用FormData结合Ajax异步上传表单,超实用
首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...
- layui 图片上传+表单提交+ Spring MVC
Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML: <div class="layui-form-item"> < ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 【Flask】 结合wtforms的文件上传表单
表单中的文件上传 基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...
- ajax上传表单的俩种方式
1.用h5对象上传表单(图片) var formData = new FormData(); formData.append("authenticity_token", '1212 ...
- 上传漏洞科普[1]-文件上传表单是Web安全主要威胁
为了让最终用户将文件上传到您的网站,就像是给危及您的服务器的恶意用户打开了另一扇门.即便如此,在今天的现代互联网的Web应用程序,它是一种 常见的要求,因为它有助于提高您的业务效率.在Facebook ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- 使用ajax上传表单(带文件)
在使用form表单的时候上传文件+表单,会使得页面跳转,而在某些时候不希望跳转,只变化页面中的局部信息 通过查找资料,可以使用FormData进行ajax操作. FormData介绍:XMLHttpR ...
- HTML5 文件异步上传 — h5uploader.js
原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...
随机推荐
- IT人经济思维之投资 - 创业与投资系列文章
前面笔者写过一个文(IT从业者的职业规划),主要通过笔者的从业道路的经验,介绍了IT从业者的职业选择道路问题,主要从技术.业务和管理三大方面进行了描述.然后,通过文(IT从业者的职业道路(从程序员到部 ...
- #数据技术选型#即席查询Shib+Presto,集群任务调度HUE+Oozie
郑昀 创建于2014/10/30 最后更新于2014/10/31 一)选型:Shib+Presto 应用场景:即席查询(Ad-hoc Query) 1.1.即席查询的目标 使用者是产品/运营/销售 ...
- Django入门
Django文档: https://docs.djangoproject.com/en/1.10/ref/ 一.简单创建app 1.1 命令行创建project和app. django-admin s ...
- apache ab测试命令详解
这篇文章主要介绍了apache性能测试工具ab使用详解,需要的朋友可以参考下 网站性能压力测试是服务器网站性能调优过程中必不可缺少的一环.只有让服务器处在高压情况下,才能真正体现出软件.硬件等各种 ...
- linux 命令之grep
grep主要用来在文件中进行正则查找 通常都会将高亮颜色打开,方便阅读,为grep建立一个别名alias放到.bashrc等文件中: alias grep='grep --color=auto' 最常 ...
- 每天一个linux命令(2):cd命令
1. 命令格式: cd [目录名] 2. 命令功能: 切换当前目录至dirName 3. 常用范例 3.1 例一:进入系统根目录 命令: cd / 输出: [root@localhost ~]# cd ...
- gdb脚本
一.简介 作为UNIX/Linux下使用广泛的调试器,gdb不仅提供了丰富的命令,还引入了对脚本的支持:一种是对已存在的脚本语言支持,比如python,用户可以直接书写python脚本,由gdb调用p ...
- markdown学习/mou
markdown编辑器mou markdown编辑器的使用很简单,mac平台选择课 MOU 这款比较轻的客户端. 使用也很方便,打开软件,->helo->mou help 就有各种示例,照 ...
- 【原】移动web页面支持弹性滚动的3个方案
有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动we ...
- 第2章 Linux系统安装(3)_SSH连接Linux工具:SecureCRT和WinSCP
4. SSH连接Linux工具 4.1 Linux网卡配置 (1)临时配置: ifconfig eth0 192.168.32.100 //给eth0网卡指定IP,写在ROM里的,关机会丢失. (2) ...