jQuery के माध्यम से फ़ाइल कैसे अपलोड करें?

Question

मुझे आश्चर्य है कि मैं jQuery AJAX की तरह यह कैसे करूं। अभी मेरे पास एक jQuery UI संवाद बॉक्स पॉपअप है और इसमें एक HTML इनपुट फ़ाइल है।

अब जब उपयोगकर्ता आयात पर क्लिक करता है तो मैं jQuery के साथ सर्वर पर AJAX पोस्ट करना चाहता हूं।

मुझे यकीन नहीं है कि मेरे एक्शन व्यू में फ़ाइल को कैसे पास किया जाए।

अभी मैंने इसे एक पूरा पोस्ट वापस कर दिया है तो मैं इस

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

<% } %> 

तब मेरे नियंत्रक में है

public ActionResult Import(HttpPostedFileBase file) 

तो मुझे यकीन है कि jQuery और साथ एक HttpPostedFileBase में पास करने के लिए कैसे नहीं कर रहा हूँ jQuery में enctype = "multipart/form-data" कैसे सेट करें।

संपादित

ठीक है अच्छी तरह से jQuery फार्म प्लगइन जाने का रास्ता हो रहा है।

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

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

मैं सोच रहा था कि मेरा जेसन क्यों काम नहीं कर रहा था लेकिन किसी ने बताया कि आप इसका उपयोग नहीं कर सकते हैं। मैं दूसरे लिंक की जांच कर रहा हूं जहां कोई जेसन का उपयोग करने में सक्षम था।

मुझे यकीन नहीं है कि क्यों लेक में इस्तेमाल किया गया था। AJAX सबमिट विधि से पहले सबमिट करें।

संपादित

मैं अपने सरणी शब्दकोश वापस जाने के लिए फाइल अपलोड json परिणाम बदल सकता है?

 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

jQuery फॉर्म प्लगइन का उपयोग करके, आप एक async फ़ाइल अपलोड कर सकते हैं। चेक-आउट नीचे दिए गए लिंक,

jQuery फार्म प्लगइन - कोड नमूने - फ़ाइल अपलोड http://jquery.malsup.com/form/#file-upload

गुड लक!

Answer 2

जैसा कि डोमिनिक द्वारा सुझाया गया है, jQuery Form plugin का उपयोग करें। आपके द्वारा पहले से बनाए गए फॉर्म को पहले ही सही तरीके से काम करना चाहिए। बस इसे पहचानने के लिए एक आईडी जोड़ें:

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

और डेटा पोस्ट करने के लिए jQuery फार्म का उपयोग करें:

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

ध्यान दें कि रूपों में वापसी डेटाप्रकार कि अपलोड फ़ाइलें JSON नहीं कर सकते हैं। अपने नियंत्रक की विधि में प्रतिक्रिया के रूप में एक्सएमएल या एचटीएमएल का प्रयोग करें।

Answer 3

मैं jQuery Form plugin का उपयोग करके AJAX के माध्यम से एक फ़ाइल अपलोड करने में सक्षम था और here वर्णित एक कस्टम जेसनरसेट क्लास।

इस का प्रयोग करें अपने शब्दकोश

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

की तरह कुछ वापस जाने के लिए और

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