Question

我是mvc的新手，并且在确定如何将文件上传到服务器时遇到一些麻烦。

我有一个表单，用户可以在其中输入姓名，地址，城市，上传文件。

用户必须能够上传最多3个文件。在用户选择了例如。 2个文件，我们立即在表单上显示文件名，如下所示：

上传的文件： gif.dk hitme.gif

但是，在将表单提交给服务器后，所选文件只能上传到服务器。

Answer 1

它只是您选择上传的文件的指示。但是，只有在您提交表单后，文件才会上传到服务器。

Answer 2

您可以通过在jQuery中订阅上传控件的change事件来显示要上传的文件列表。

<强>控制器：

public class UploaderController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files)
    {
        foreach (var file in files)
        {
            if (file != null && file.ContentLength > 0)
            {
                file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName)));
            }
        }
        return View("Index");
    }
}

查看：

<head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#uploadFiles').on("change", function () { var fileUpload = $(this); var files = fileUpload.context.files; $("#files").empty(); $("#files").append("<h3>List of files to be uploaded:</h3>"); for (var i = 0; i < files.length; i++) { var file = files[i]; var name = file.name; var div = "<div>File name:" + name + "</div>"; $("#files").append(div); } }); }); </script> </head> <body> @using (Html.BeginForm("Multiple", "Uploader", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div id="multiple"> <input id="uploadFiles" type="file" class="multiple" name="files" multiple /> </div> <button class="btn btn-default">Upload</button> <div id="files"> </div> } </body>

<强>输出：

上传文件，立即在表单上显示文件名，但仅将文件上传到服务器om表单提交

2 个答案: