个人中心
gpt4 book ai didi

javascript - 使用 JQuery 和 MVC4 上传多个文件

转载 作者：行者123 更新时间：2023-11-28 00:23:17 24 4
gpt4 key购买 nike

我正在尝试上传多个文件以及普通表单数据。我以前在 PHP 中实现了这个功能，现在我用 C# 在 ASP.NET MVC4 中实现了这个功能。我有一个 html 表单

<form action="/controller/actionane" name="applicationform" class="upload-form" method="post" onsubmit="return false;" enctype="multipart/form-data" id="userform"> 
        <input class="form-control" type="file" class="upload-file" data-max-size="12582912" multiple="multiple" name="attachment[]" value="documents">
        <input class="btn btn-success" type="submit" name="submit" onclick="formSubmit()" />
    </form>

我的 jquery-1.11.1 Javascript 代码如下所示:

    function formSubmit() {
    var form = $("form[name='applicationform']");
    var data = new FormData(form[0]);
    $.ajax(
        {
            method: "POST",
            url: form.attr("action"),
            processData: false, // Don't process the files
            contentType: false, cache: false, async: false,
            data: data,
            success: function (data) {
                alert(data);
            }
        });
    }

我的 Controller 看起来像这样

[HttpPost]
public JsonResult submitApplication(HttpPostedFileBase[] attachment) 
{
                string fil= "";
                foreach (HttpPostedFileBase file in attachment)
                {
                    /*Geting the file name*/
                    string filename = System.IO.Path.GetFileName(file.FileName);
                    fil += filename;
                    /*Saving the file in server folder*/
                    file.SaveAs(Server.MapPath("~/Images/" + filename));
                    string filepathtosave = "Images/" + filename;
                    /*HERE WILL BE YOUR CODE TO SAVE THE FILE DETAIL IN DATA BASE*/
                }

                    return this.Json(fil,JsonRequestBehavior.AllowGet);
}

但这并不是将文件传递给参数抛出对象引用 null 异常我应该怎么做才能让它运行？

最佳答案

你可以试试这个:

客户端代码:

<html>
<head>
<title>Upload Example</title>
<script src="~/Scripts/jquery-2.1.0.intellisense.js"></script>
<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function () {
    $("#Upload").click(function () {
        var formData = new FormData();
        var totalFiles = document.getElementById("FileUpload").files.length;
        for (var i = 0; i < totalFiles; i++)
        {
            var file = document.getElementById("FileUpload").files[i];

            formData.append("FileUpload", file);
        }
        $.ajax({
            type: "POST",
            url: '/Home/Upload',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                alert('succes!!');
            },
            error: function (error) {
                alert("Failed");
            }
        });
    });
});

</script>
</head>
<body>
<input type="file" id="FileUpload" multiple />
<input type="button" id="Upload" value="Upload" />
</body>
</html>

服务器端代码:

服务器端....

public class HomeController : Controller
{
  [HttpPost]
  public void Upload( )
  {
    for( int i = 0 ; i < Request.Files.Count ; i++ )
    {
      var file = Request.Files[i];
      var fileName = Path.GetFileName( file.FileName );
      var path = Path.Combine( Server.MapPath( "~/[Your_Folder_Name]/" ) , fileName );

      file.SaveAs( path );    
    }
  }
}

关于javascript - 使用 JQuery 和 MVC4 上传多个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29792324/

24 4 0
文章推荐： html - 我可以使用 :before or :after pseudo-element on an input field? 吗
文章推荐： c++ - 如何在 C++ 中将我的答案作为固定的十进制美元金额？
文章推荐： javascript - 删除页面元素时防止页面滚动
文章推荐： c++ - 类组合 - 无法从 'int' 转换为类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com