jQuery AJAX, इनपुट प्रकार फ़ाइल और जेसन

Question

के साथ फ़ॉर्म भेजें मेरे पास कई इनपुट और अन्य फ़ील्ड के साथ एक फॉर्म है।

मैं एक बटन को बचाने के लिए है, और जब मैं क्लिक करें, मैं jQuery के साथ ajax के साथ फार्म भेज:

$.ajax({ 
     type:  "POST", 
     dataType: "json", 
     url:  $('#ajaxUrl').val(), 
     data:  "action=save&" + form.serialize() 
}); 

तो, जब मैं पाठ की तरह ही सरल इनपुट है, चयन आदि .. यह ठीक है। लेकिन अगर मेरे पास इनपुट प्रकार फ़ाइल है, तो मैं अपनी फाइल को पुनः प्राप्त नहीं कर सकता। $ _FILES हमेशा खाली है।

मैं जितना संभव हो सके इसे कैसे कर सकता हूं?

संपादित करें: मैं एक प्लगइन :)

Answer 1

का उपयोग नहीं करना चाहते हैं मैं इस jQuery plugin जो upload files करने की क्षमता है का उपयोग किया है।

HTML:

<form action="file-echo2.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="myfile"><br> 
    <input type="submit" value="Upload File to Server"> 
</form> 

Javascrtipt:

$('form').ajaxForm({ 
    beforeSend: function() { 

    }, 
    uploadProgress: function(event, position, total, percentComplete) { 

    }, 
    success: function() { 

    }, 
    complete: function(xhr) { 

    } 
}); 

Answer 2

form.serialize फ़ाइल आदानों का प्रबंधन नहीं है। formData के साथ आपको XMLHttpRequest करना होगा जैसा कि एडेनो सुझाव देता है, example usage here देखें। पुराने ब्राउज़र के लिए, iframe का उपयोग करके समाधान और iframe के साथ फ़ॉर्म को पोस्ट के रूप में पोस्ट करना है। कुछ jquery प्लगइन्स आपके लिए यह सब कुछ करेंगे, जैसे, कहें, JQuery-File-Upload (लेकिन बहुत से अन्य मौजूद हैं)।

Answer 3

मुझे Google पर "फॉर्मडाटा ऑब्जेक्ट्स का उपयोग करके" यह little "vanilla" framework मिला।

द्वारा इस्तेमाल किया:

AJAXSubmit(myForm); 

अगर आप console.log सिर्फ

function ajaxSuccess(){/*here*/} 

पर संशोधित() ajaxSuccess पर प्रतिक्रिया आप डेटा सर्वर को प्रस्तुत देख सकता था। यह submittedData संपत्ति पर है। ASP.NET MVC के लिए

Answer 4

कार्यान्वयन:

अपने फार्म आवरण कमाना शुरू करने के लिए:

<form id="inputform"> 
    <input class="hide" type="file" name="file" id="file" /> 
</form> 

Сreate एक क्लाइंट-हैंडलर भेजने के लिए: सर्वर पर

$("#yourButton").bind('click', function() { 
    var data = new window.FormData($('#inputform')[0]); 
    $.ajax({ 
     xhr: function() { 
      return $.ajaxSettings.xhr(); 
     }, 
     type: "POST", 
     data: data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     url: "@Url.Action("MethodName", "ControllerName")", 
     success: function() { }, 
     error: function() { }, 
    }); 
}); 

Do हैंडलर पक्ष (नियंत्रक):

public ActionResult MethodName(HttpPostedFileWrapper file) { 
    var img = Image.FromStream(file.InputStream); 
     .... 
     return ..; 
    } 

मुझे उम्मीद है कि इससे आपको समय बचाने में मदद मिलेगी;)