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异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...
随机推荐
- 【转】2016/2017 Web 开发者路线图
链接:知乎 [点击查看大图] 原图来自LearnCodeAcademy最火的视频,learncode是YouTube上最火的Web开发教学频道,介绍包括HTML/CSS/JavaScript/Subl ...
- RMAN命令LIST操作总结
在使用RMAN备份.还原的过程中,我们经常需要查看备份的一些详细信息,例如,RMAN提供了LIST命令.关于LIST命令的详细信息 可以参考Oracle Database Backup and Rec ...
- p2p tcp nat 原理图+源码(原创)
现今网上p2p的 udp nat穿透 文章 多如牛毛, p2p tcp nat的文章寥寥无几 ,up主研究了几天 终于有所收获,特来向大家分享,请大家多多支持! 1.首先你要有台外网服务器 或者 电信 ...
- sql server2014不允许保存更改。阻止保存要求重新创建表的更改
错误描述: SQL Server2014在原有的数据表中修改表结构后,保存数据表,提示错误如下: 不允许保存更改.您所做的更改要求删除并重新创建以下您对无法重新创建的表进行了更改或启用了"阻 ...
- MYSQL 5.7 无法启动(Could not open error log file errno 2)
前两天电脑中毒, 病毒好像把mysql的 log.err 文件给删掉了.然后服务一直启动不了:Could not open error log file errno 2. 然后疯狂百度,搜索的结果大多 ...
- [Java入门笔记] Java语言基础(五):数组
简介 数组可用用于存储存储多个数据,Java的数组要求所有的数组元素具有一种相同的数据类型.一旦数组初始化完成,数组在内存中的空间被固定下来,长度不可改变,即使把数组的元素清空,所占用的空间依然被保留 ...
- iOS AppIcon尺寸和上传ITunes构建版本尺寸
避免忘记. 记录一下 App Icon: 29X2940X4058X5876X7687X8780X80120X120152X152167X167180X180 ITunes构建版本: 1242 x 2 ...
- ubuntu下apache重启报Could not reliably determine the server’s fully......
在Ubuntu上安装Apache,每次重启,都会出现以下错误提示: Could not reliably determine the server’s fully qualified domain n ...
- Maven设置代理服务器
在setting.xml中设置以下信息即可,请修正对应信息 <proxies> <proxy> <id>optional</id> <active ...
- [WPF系列]-Prism+EF
源码:Prism5_Tutorial 参考文档 Data Validation in WPF √ WPF 4.5 – ASYNCHRONOUS VALIDATION Reusable asyn ...