jQuery使用FormData上传文件

柔情只为你懂 2022-04-22 14:50 277阅读 0赞

这段时间，一直练习在ASP.NET MVC程序中上传文件。静态，动态，单个或多文件上传。  
  
在网上有看到网友提及使用FormData来上传，Insus.NET觉得是一个很不错的方式。

控制器中，创建两个Action：  
[![151437204548017.png][]][151437204548017.png 1]

代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public ActionResult FilejQLoad()
            {
                return View();
            }
    
            public ActionResult Uf(HttpPostedFileBase file)
            {
                if (file.ContentLength > 0)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var path = Path.Combine(Server.MapPath("~/Temp"), fileName);
                    file.SaveAs(path);
                }
    
                return new ContentResult();
            }

完成视图：  
[![151439545167016.png][]][151439545167016.png 1]

jQuery代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

$(':button').click(function () {
                    var formData = new FormData($('form')[0]);
                    $.ajax({
                        url: 'Uf',  
                        type: 'POST',
                        xhr: function () {  
                            return $.ajaxSettings.xhr();
                        },                   
                        success: function (data, textStatus) {
                            alert("file success uploaded.");
                            location.reload();
                        },
                        data: formData,                  
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                });

挺简单的：  
[![151446378608059.gif][]][151446378608059.gif 1]

[151437204548017.png]: /images/20220327/7f3c4495dd104619bd70ddb800248eac.png
[151437204548017.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/151437204548017.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220327/5da319e8ec1a49f5a6749b27d60b513e.png
[151439545167016.png]: /images/20220327/e63532dbf08c49299af7883938527b2e.png
[151439545167016.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/151439545167016.png
[151446378608059.gif]: /images/20220327/a8dc652f6ae248e6b76327dfce494128.png
[151446378608059.gif 1]: http://images0.cnblogs.com/blog2015/28036/201507/151446378608059.gif