JS - FormData详解

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

2、异步上传文件

1、创建一个空对象：

2、通过表单对formData进行初始化

创建表单：

通过表单元素作为参数，实现对formData的初始化：

1、通过get(key)与getAll(key)来获取相对应的值

2、通过append(key,value)在数据末尾追加数据

3、通过set(key, value)来设置修改数据

key的值不存在，会添加一条数据

key的值存在，会修改对应的value值

4、通过has(key)来判断是否存在对应的key值

5、通过delete(key)可以删除数据

创建表单：

发送数据：

先讲讲如何跨域，跨域方法很多，访问方式其实与本域名访问没有很大不同。简单列举几个：

使用window.postMessage实现跨域通信。

使用ajax异步加载其他网站资源，如加载QQ登陆成功的资料。

头部的css、js，img标签中的src等，都可以填写外部的链接，都算跨域。

然后再讲讲异步文件上传，异步上传和异步上传文件其实很类似，下面是使用jq的ajaxupload插件进行上传的示例

$.ajaxFileUpload({

url: 'upload.action', //用于文件上传的服务器端请求地址

secureuri: false, //一般设置为false

fileElementId: 'upload', //文件上传控件的id属性  <input type="file" id="upload" name="upload" />

dataType: 'json', //返回值类型 一般设置为json

success: function(data, status){ //服务器成功响应处理函数

alert(data.message) //从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量

$("#img").attr("src", data.imagePath)

if (typeof(data.error) != 'undefined'){

if (data.error != '') {

alert(data.error)

} else {

alert(data.message)

}

}

},

error: function(data, status, e) { //服务器响应失败处理函数

alert(e)

}

})

function saveUser() {

            var file = document.getElementById("file").files[0]

            //原生ajax实现文件上传

            var formData = new FormData()

            if (file) {

                formData.append("file", file)

                console.log(file)

            }

            //得到xhr对象

            var xhr = null

            if (XMLHttpRequest) {

                xhr = new XMLHttpRequest()

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP")

            }

            xhr.open("post", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true)//设置提交方式，url，异步提交

//            xhr.setRequestHeader("Content-Type","multipart/form-data")

            xhr.onload = function () {

                var data = xhr.responseText    //得到返回值

                console.log(data)

            }

            xhr.send(formData)

        }

---