2016-08-09 48 views
1

Ich bin neu bei mvc und habe ein wenig Mühe herauszufinden, wie man Dateien auf den Server hochlädt.Dateien hochladen, Dateinamen sofort auf dem Formular anzeigen, aber Dateien werden nur auf den Server hochgeladen. Om Formular senden

Ich habe ein Formular, wo der Benutzer Name, Adresse, Stadt, Dateien hochladen.

Der Benutzer muss maximal 3 Dateien hochladen können. Nachdem der Benutzer z. B. ausgewählt hat. 2 Dateien, liefern wir sofort Namen auf dem Formular wie diese Dateien:

Hochgeladene Bilder: gif.dk hitme.gif

aber die ausgewählten Dateien sollten nur auf den Server hochgeladen werden, nachdem das Formular eingereicht Server.

+0

Aber wie macht man fil-Kontrolle, um anzuzeigen, zeigen die von den Dateien hochgeladen werden? – LalA

Antwort

0

Sie können eine Liste der hochzuladenden Dateien anzeigen, indem Sie das Ereignis des Upload-Steuerelements in jQuery abonnieren.

Controller:

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

Ausblick:

<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> 

Ausgang:

Listing files to be uploaded using jQuery

0

Dies ist nur eine Anzeige der Dateien, die Sie zum Hochladen ausgewählt haben. Dateien werden jedoch erst auf den Server hochgeladen, nachdem Sie das Formular gesendet haben.