How to Implement Attach More Files in MVC and jque

问题:

In a post Yahoo, when attaching files, there is a button "Attach more files" when you press it, it becomes one field to insert the file. Here is the code:

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

How can i implement it MVC?

回答1:

For uploading multiple files using File Upload control i use JQuery Multifile plugin which is simple and easy to see. See this link JQuery Multiple File Upload

Just inlcude this library and JQuery and its syntax is like

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

回答2:

1. Create a Controller and Action that allows you to upload files

2. Find a client side plugin that achieves uploading multiple files. One that I've found to work quite well is the Upload plugin by Kendo UI

If you go with Kendo UI, this should get you started:

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

Controller:

   [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("");
    }

View

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

回答3:

It is almost same question like https://stackoverflow.com/questions/14575787/ . Plug in support multi file upload. Do let me know if more details are needed.

回答4:

You can use many file uploader such as

this

and u can use this code for upload this code is client side:

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

First you can do some validation if you want. For example in the onChange event of the file.

    $(':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});
    }
}

and this is your contoller

 [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("");
    }

so if you dont want use ajax use this

@{
    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" />
}

回答5:

After tyring many unsuccessful solution I got it from

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

click this useful link

 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
        });
    }

and then retrieved them in my Post Create Action

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();
    }