FormData的使用
一、
資料上傳的方式有很種，例如
1、表單上傳
後端
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string myAccount, string myPassword)
{
return View();
}
}
}
前端
<form action="@Url.Action("Index")" method="post" enctype="application/x-www-form-urlencoded"> <input type="text" name="myAccount" value="abc" /> <input type="text" name="myPassword" value="123" /> <input type="submit" name="name" value="sned" /> </form>
2、利用jQuery上傳
後端
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string myAccount, string myPassword)
{
return Content(myAccount + " " + myPassword);
}
}
}
前端
<form id="myform"> <input type="text" name="myAccount" value="abc" /> <input type="text" name="myPassword" value="123" /> <input type="submit" name="name" value="sned" /> </form> <div id="mydiv"> </div> @section scripts{ <script> $("#myform").submit(function myfunction(event) { $.ajax({ url: '@Url.Action("Index")', type: 'POST', data: $('#myform').serialize(), success: function (data) { $("#mydiv").append("<p>" + data + "</p>"); } }); event.preventDefault(); }); </script> }
3、使用XMLHttpRequest上傳
稍後舉例。
使用由難到易排列為3 > 2 > 1
二、
而此文章則是說明FormData物件如何使用與如何跟XMLHttpRequest配合完成上傳動作
前端
@{
ViewBag.Title = "Home Page";
}
<form id="myform">
<input type="file" name="name" value="" id="myfile" />
<input type="submit" value="send" id="send" />
</form>
@section scripts
{
<script>
document.getElementById("myform").addEventListener("submit",myfunction);
function myfunction() {
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456);
// HTML file input, chosen by user
var fileInputElement = document.getElementById("myfile");
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>';
var blob = new Blob([content], { type: "text/xml" });
formData.append("webmasterfile", blob);
//XMLHttpRequest
var request = new XMLHttpRequest();
request.open("POST", "@Url.Action("Index")");
request.send(formData);
event.preventDefault();
}
</script>
}
後端
using System.Web;
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string username, string accountnum, HttpPostedFileBase userfile, HttpPostedFileBase webmasterfile)
{
ViewBag.Message = "Your application description page.";
return View();
}
}
}
建構式為
1、object FormData(Optional form)
在新增一個FormData物件時，可以 new 一個空的FormData物件，
也可以直接將表單送進FormData建構式。
var myForm = document.getElementById('myForm'); var formData = new FormData(myForm);
方法有
2、void FormData.append(key, value ,Optional filename)
對FormData物件附加一key/value上去，key可相同。
3、void FormData.delete(key)
用來指定要刪除那一個key值。
4、iterator FormData.entries()
每次呼叫時只從FormData物件取出一key/value。
5、FormDataEntryValue FormData.get(key)
從指定的key中取出第一筆value。
6、Array FormData.getAll(key)
從指定的key中取出所有value。
很多人可能認為key/value是一對一key不可重複的，其實不然，key是可以多個相同，
所以使用FormData.getAll(key)方法時，可能吐出不只一筆value。
7、boolean FormData.has(key)
判斷FormData物件是否有該key存在。
8、iterator FormData.keys()
每次只取出一key名稱(不包括value)。
9、FormData.set(key, value ,Optional filename)
如果已存在的key/value則FormData.set(key,value)方法是用來設定該值，
如果不存在的key/value則FormData.set(key,value)方法是用來新增該值。
10、iterator FormData.values()
每次只取出一value值(不包括key)。
參考資料：