上传文件 使用HTML5的FormData 提交表单和文件数据

后台部分：

数据库可以存放二进制流数据  主流的如mysql  oracle 中的blob类型就是二进制流。但是数据库一般是系统的瓶颈，文件建议存放在硬盘，路劲存放在数据库。不管目前针对
的是什么项目，文件都不是存放在数据库里 
而是放到独立的一台静态文件服务器中，而是把文件目的地（地址）放到数据库中 

好处是：1、对于外部的访问，数据库的读写负载会很小，也就是主观上减少了服务器的压力 

        2、便于维护和管理，如果怕文件服务器宕机，做个文件服务器的集群（备份），这样文件的存储量会更大 

html表单提交的几种方式：

1.submit 表单提交

<input type=’text’ name=’username’ />

<input type=’password’ name=’password’/>

<input type=’submit’ value=’登陆'/>

2.js 调用表单提交
$('#documentForm').submitForm({
url: "/Document/SubmitDocumentCreate",
dataType: "text",
callback: function (data) {
endFileUpload();
data = eval("(" + data + ")");
alert(data.Content);
if (data.Result > 0) {
location.href = data.Redirect;
}
},
before: function () {
startFileUpload();
var errMsg = "";
}
}).submit();

3.jquery的序列化方法

$.post({
url:'/recordController/add',
data:$('#addRecordForm').serializeArray(),//文件信息不能被序列化
success:function (response) {
if(response.success==true){
$('#addRecord').modal('hide');
}else{
alert(response.msg);
}
}
})
4.HTML5 FormData获取表单数据
XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。

<form name="form1" id="form1">
<input type="text" name="name" value="fdipzone">
<input type="text" name="gender" value="male">
</form>
var form = document.getElementById('form1');
var formdata = new FormData(form); //获取表单数据 var formData = new FormData(document.forms.namedItem("heroForm"));
formdata.append("myfile", "extra data");//也拼接数据

var xhr = new XMLHttpRequest();//2.创建一个http请求对象
xhr.open("POST", "/heroController/add");
xhr.send(formData);