如何实施附加在MVC的文件和jQuery的FileUploading(How to Implemen

在雅虎后，附加文件的时候，有一个按钮“附加多个文件”，当你按下它，它变成一个字段插入的文件。下面是代码：

<a href = "javascript: addUploadFields ();" id = "attach_more"> Attach more files </ a>

我怎么能实现它的MVC？

Answer 1:

对于使用上传文件上传控制的多个文件使用jQuery插件，多文件是简单易见的。请参阅此链接JQuery的多文件上传

只是inlcude此库和jQuery和它的语法是这样

<input type="file" class="multi"/>

Answer 2:

创建一个控制器和行动，允许你上传文件
查找客户端插件，实现上传多个文件。一，我已经找到工作得很好是由上传插件剑道UI

如果你有剑道UI去，这应该让你开始：

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/upload/overview

控制器：

   [HttpPost]
    public ActionResult Save(HttpPostedFileBase[] files) {
        // The Name of the Upload component is "attachments"
        foreach (var file in files) {
            //Do Something
        }
        // Return an empty string to signify success
        return Content("");
    }

视图

<form action="/Controller/Action" method="post" enctype="multipart/form-data">
 <input type="file" name="files[]" id="file" />
...
</form>

Answer 3:

这就像几乎同样的问题https://stackoverflow.com/questions/14575787/ 。插上支持多文件上传。不要让我知道如果需要更多的细节。

Answer 4:

您可以使用许多文件上传如

这个

和u可以使用此代码上传这段代码是客户端：

<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>

首先，如果你愿意，你可以做一些验证。例如在文件的onChange事件。

    $(':file').change(function(){
        var file = this.files[0];
        name = file.name;
        size = file.size;
        type = file.type;
        //your validation
    });

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'url',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });
});

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

这是你的位指示

 [HttpPost]
    public ActionResult Save(HttpPostedFileBase[] files) {
        // The Name of the Upload component is "attachments"
        foreach (var file in files) {
            //Do Something
        }
        // Return an empty string to signify success
        return Content("");
    }

所以，如果你不想使用AJAX使用

@{
    ViewBag.Title = "Upload";
}
<h2>
    Upload</h2>

@using (Html.BeginForm(actionName: "Upload", controllerName: "User", 
                       method: FormMethod.Post,
                       htmlAttributes: new { enctype = "multipart/form-data" }))
{
    <text>Upload a photo:</text> <input type="file" name="files"  multiple />
    <input type="submit" value="Upload" />
}

Answer 5:

tyring许多不成功的解决方案后，我得到了它

http://lbrtdotnet.wordpress.com/2011/09/02/asp-net-mvc-multiple-file-uploads-using-uploadify-and-jqueryui-progressbar/

点击这个链接有用

 I kept the Url Values in a session



 public JsonResult Upload(HttpPostedFileBase file)
    {
        if (Session["myAL"] == null)
        {
            al = new ArrayList();
        }
        else
            al = (ArrayList)Session["myAL"];

        var uploadFile = file;

            if (uploadFile != null && uploadFile.ContentLength > 0)
            {
                string filePath = Path.Combine(HttpContext.Server.MapPath("~/Content/Uploads"),
                                                   Path.GetFileName(uploadFile.FileName));                    
                al.Add(filePath);
                Session["myAL"] = al;
                uploadFile.SaveAs(filePath);
            }

        var percentage = default(float);

        if (_totalCount > 0)
        {
            _uploadCount += 1;
            percentage = (_uploadCount / _totalCount) * 100;
        }

        return Json(new
        {
            Percentage = percentage
        });
    }

然后取回他们在我的帖子创建操作

public ActionResult MultimediaCreate(MultimediaModel newMultimedia)
    {            
        if (ModelState.IsValid)
        {
            db.submitMultimedia(newMultimedia);
            al = (ArrayList)Session["myAL"];
            foreach(string am in al)
            {
                MarjaaEntities me = new MarjaaEntities();
                MultimediaFile file = new MultimediaFile();
                file.MultmediaId = newMultimedia.id;
                file.MultimediaFileUrl = am;
                me.MultimediaFiles.AddObject(file);
                me.SaveChanges();
                Session.Remove("myAL");
            }
            return RedirectToAction("MultimediaIndex");
        }
        return View();
    }

文章来源: How to Implement Attach More Files in MVC and jquery for FileUploading