FormData作用 http://pan.baidu.com/s/1hs1IrVA 

 1 @{
 2     ViewBag.Title = "Index";
 3     Layout = null;
 4 }
 5 
 6 <html>
 7 <head>
 8     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 9     <title> FormData Demo </title>
10    
11 
12 </head>
13 
14 <body>
15     <p>这里要注意几点：</p>
16 
17     <p>
18         var oMyForm = new FormData();使用
19     </p>
20     <p>
21        
22             表单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。
23 
24         
25 
26     </p>
27     <ul>
28         
29         <li>
30             <code>processData</code>设置为<code>false</code>。因为<code>data</code>值是<code>FormData</code>对象，不需要对数据做处理。
31         </li>
32         <li>
33             <code>&lt;form&gt;</code>标签添加<code>enctype="multipart/form-data"</code>属性。
34         </li>
35         <li>
36             <code>cache</code>设置为<code>false</code>，上传文件不需要缓存。
37         </li>
38         <li>
39             <code>contentType</code>设置为<code>false</code>。因为是由<code>&lt;form&gt;</code>表单构造的<code>FormData</code>对象，且已经声明了属性<code>enctype="multipart/form-data"</code>，所以这里设置为false。
40         </li>
41        
42     </ul>
43 
44 
45     <form name="form1" id="form1">
46         <p>name:<input type="text" name="name" id="name"></p>
47         <p>gender:<input type="radio" name="gender"  value="1">male <input type="radio" name="gender" value="2">female</p>
48         <p>photo:<input type="file" name="photo" id="photo" ></p>
49         <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>
50     </form>
51     <div id="result"></div>
52 </body>
53 </html>
54 <script src="~/Scripts/jquery-1.8.2.js"></script>
55 <script type="text/javascript">
56 
57 
58     function fsubmit() {
59         //1.0创建一个FormData空对象，然后使用append方法添加key/value
60         var formdata = new FormData();
61         formdata.append('name', $("#name").val());
62         formdata.append('gender', $("input[name='gender']:checked").val());
63         formdata.append("userfile", $('#photo')[0].files[0]);//上传指定的文件
64         //2.取得form对象，作为参数传入到FormData对象
65         //var form = document.getElementById('form1');
66         //var formdata = new FormData(form);
67         $.ajax({
68             url: '/home/UploadImg',
69             type: 'POST',
70             data: formdata,
71             dataType: 'JSON',
72             cache: false,//cache设置为false，上传文件不需要缓存。
73             processData: false,  // processData设置为false。因为data值是FormData对象，不需要对数据做处理。
74             contentType: false,  // contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
75             success: function () { }
76         })
77     }
78 
79 </script>

 

 

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 
 7 namespace WebImgUpload.Controllers
 8 {
 9     public class HomeController : Controller
10     {
11         //
12         // GET: /Home/
13 
14         public ActionResult Index()
15         {
16             return View();
17         }
18 
19 
20         public JsonResult UploadImg()
21         {
22             var from = Request.Form;
23             string filename = Request.Files[0].FileName;
24 
25             return Json(new { },JsonRequestBehavior.AllowGet);
26         }
27 
28 
29 
30     }
31 }

 

posted on 2017-03-20 09:41  高达  阅读(610)  评论(0)    收藏  举报

导航