使用 FormData 对象
FormData 对象是 html5 的一个对象, 目前的一些主流的浏览器都已经兼容, 非常的强大
FormData 可以凭空创建一个对象, 然后往这个对象里面添加数据, 然后直接提交, 不需要写一行 HTML 代码, 如下:
- var form = new FormData();
- form.append("username","zxj");
- form.append("password",123456);
- var req = new XMLHttpRequest();
- req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
- req.send(form);
这样就可以向浏览器发送表单数据了, 或者也可以使用 jQuery 这样发送:
- var form = new FormData();
- form.append("username","zxj");
- form.append("password",123456);
- $.Ajax({
- url:"${pageContext.request.contextPath}/public/testupload",
- type:"post",
- data:form,
- processData:false,
- contentType:false,
- success:function(data){
- Windows.clearInterval(timer);
- console.log("over..");
- }
- });
FormData 还支持直接从 HTML 中的表单生成数据, 就是在 HTML 页面中已经有数据了, 然后 FormData 可以直接把这个表单的数据写入这个对象, 然后直接提交给后台
代码如下, 先给出 HTML 代码:
- <form id="tf">
- <input type="file" name="img"/>
- <input type="text" name="username"/>
- <input type="button" value="提" onclick="test();"/>
- .............
- </form>
FormData 还支持困扰众多开发者已久的 Ajax 的上传文件, 以前我们上传文件, 需要写一个表单直接刷新提交, 但是这里不需要, 下面给出提交代码:
- function test(){
- var form = new FormData(document.getElementById("tf"));
- // var req = new XMLHttpRequest();
- // req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
- // req.send(form);
- $.Ajax({
- url:"${pageContext.request.contextPath}/public/testupload",
- type:"post",
- data:form,
- processData:false,
- contentType:false,
- success:function(data){
- Windows.clearInterval(timer);
- console.log("over..");
- },
- error:function(e){
- alert("错误!!");
- Windows.clearInterval(timer);
- }
- });
- get();// 此处为上传文件的进度条
- }
来源: http://www.bubuko.com/infodetail-2831359.html