Wie lade ich eine Datei über jQuery hoch?

Question

Ich frage mich, wie würde ich das mit jQuery ajax tun. Jetzt habe ich eine jQuery-UI-Dialog-Popup und es hat eine HTML-Eingabedatei darauf. Jetzt

, wenn der Benutzer klickt importiert Ich mag eine Ajax-Post an den Server mit jQuery zu tun.

Ich bin nicht sicher, wie die Datei passiert in obwohl meine Aktion Ansicht.

Im Moment habe ich es einen vollständigen Beitrag tun zurück, so habe ich diesen

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{%> 
    <br /> 
    <p><input type="file" id="file" name="file" size="23 accept="text/calendar"></p><br /> 
    <p><input type="submit" value="Upload file" /></p>   

<% } %> 

Da ist in meinem Controller

public ActionResult Import(HttpPostedFileBase file) 

Also ich bin nicht sicher, wie in einem HttpPostedFileBase mit jQuery passieren und wie man in jQuery enctype = "multipart/form-data" setzt.

bearbeiten

Ok gut die jQuery Form Plugin scheint der Weg zu gehen zu sein.

$('#frm_ImportCalendar').livequery(function() 
{ 
    var options = { 
     dataType: 'json', 
     success: function(response) 
     { 
      alert(response); 
     } 
    }; 

    $(this).ajaxForm(options); 
}); 

Ich habe mich gefragt, warum meine Json nicht funktionierte aber jemand Sie erwähnt es nicht nur wie verwenden können. Ich überprüfe den anderen Link, wo jemand Json verwenden konnte.

Ich bin mir nicht sicher, warum in Lck verwendet .submit vor der Ajax-Methode einreichen.

bearbeiten

Wie kann ich das Datei-Upload-json Ergebnis ändere meinen Wörterbuch Array zurück?

 Dictionary<string, string> result = new Dictionary<string, string>(); 
     result.Add("Msg", "Success!!"); 
     result.Add("Body", calendarBody); 

// how can I change this? 
    return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } }; 

Answer 1

das jQuery-Plugin-Formular verwenden, können Sie einen Asynchron-Datei-Upload erreichen. Check-out auf den folgenden Link,

jQuery Formular Plugin - Codebeispiele - Datei-Uploads http://jquery.malsup.com/form/#file-upload

Viel Glück!

Answer 2

Wie von Dominic vorgeschlagen, verwenden Sie die jQuery Form plugin. Das Formular, das Sie bereits erstellt haben, sollte bereits korrekt funktionieren. Fügen Sie einfach eine ID zu identifizieren:

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { id = "asyncForm", enctype = "multipart/form-data" })) 

und verwenden jQuery Formular die Daten zu schreiben:

$(document).ready(function(){ 
    $('#asyncForm').submit(function(){ 
     $(this).ajaxSubmit({ 
      beforeSubmit: function(){ 
       //update GUI to signal upload 
      } 
      data: { additional = 'value' }, 
      dataType: 'xml', 
      success: function(xml){ 
       //handle successful upload 
      } 
     }); 
    }); 
}); 

Beachten Sie, dass die Rückkehr Datentyp in Formen, die Dateien hochladen können nicht JSON sein. Verwenden Sie XML oder HTML als Antwort in der Methode Ihres Controllers.

Answer 3

Ich konnte eine Datei über AJAX mit dem jQuery Form plugin hochladen und eine benutzerdefinierte JsonResult-Klasse wie beschrieben .

verwenden so etwas wie Ihr Wörterbuch

return new FileUploadJsonResult { Data = new { Msg = "Success!!", Body = calendarBody } }; 

zurückzukehren und Ihre Nachricht in der Callback-Funktion zu erhalten

success: function(result) { 
    $("#ajaxUploadForm").unblock(); 
    $("#ajaxUploadForm").resetForm(); 
    alert(result.Msg); 
}