PHP AJAX छवि FormData

Question

के साथ अपलोड करना मैं jQuery और अजाक्स फ़ंक्शंस के लिए अपेक्षाकृत नया हूं, लेकिन पिछले कुछ दिनों में अजाक्स रूपों के साथ काम कर रहा हूं। छवियों को अपलोड करने का प्रयास करते समय मुझे फ़ाइल अपलोड के साथ एक समस्या आई है। संसाधनों की तलाश करते समय, मुझे कुछ भी उपयोगी नहीं मिला क्योंकि वे व्यर्थ एक्स्ट्रा के साथ अधिक जटिल लगते हैं या कोई स्पष्टीकरण नहीं है, जो मुझे और जानने के लिए मदद नहीं करता है।

मैं अजाक्स में छवि अपलोड संभाल के लिए इस कोड लिखा है:

$(function() { 
    $('.input_photo').on("change",function() {        
     var formData = new FormData($('form.upload-form')); 

     $.ajax({ 
      url: "upload.php", 
      type: "POST", 
      data: formData, 
      success: function (msg) { 
       alert(msg) 
      } 
     }); 
    }); 
}); 

यह upload.php फ़ाइल के लिए अनुरोध भेजता है, तथापि कोई डेटा नहीं भेजा जाता है, मूल रूप से मेरी प्रपत्र सचमुच है यह:

<form class="upload-form"> 
    <input type="file" name="input_photo" class="input_photo" /> 
</form> 

हेडर में कोई भी डेटा पास नहीं होता है और मुझे लगता है कि मैं इसे $_POST['data'] सरणी या $_FILES के साथ PHP के माध्यम से एक्सेस करूंगा? बेहतर ज्ञान वाला कोई व्यक्ति इसे समझाने में मदद करता है, इसे और समझना बहुत अच्छा होगा। धन्यवाद।

Answer 1

यह एक या एक से अधिक फ़ाइलों के लिए काम करेंगे।

$('input:file').on('change', function() { 

var data = new FormData(); 

//Append files infos 
jQuery.each($(this)[0].files, function(i, file) { 
    data.append('file-'+i, file); 
}); 

$.ajax({ 
    url: "my_path", 
    type: "POST", 
    data: data, 
    cache: false, 
    processData: false, 
    contentType: false, 
    context: this, 
    success: function (msg) { 
      alert(msg); 
     } 
    }); 
}); 

फिर

$_FILES['file-0'] 
$_FILES['file-1'] 
[...] 

लेकिन सावधान है कि केवल पदों डेटा फार्म using FormData doesn't work on IE before IE10

Answer 2

इस के साथ प्रयास करें:

var formData = $('form.upload-form').serialize(); 

Answer 3

आप अपने ajax कॉल में processData और contentType निर्धारित करने की आवश्यकता है (यह भी आदेश फ़ाइल सामग्री लाने के लिए अपने input तत्व करने के लिए आईडी जोड़ा)।

एचटीएमएल

<form class="upload-form"> 
     <input type="file" id="photo" name="input_photo" class="input_photo" /> 
    </form> 

जे एस

$(function() { 
     $('.input_photo').on("change",function() {  
      var file = document.getElementById("photo").files[0]; //fetch file 
      var formData = new FormData();      
      formData.append('file', file); //append file to formData object 

      $.ajax({ 
       url: "upload.php", 
       type: "POST", 
       data: formData, 
       processData: false, //prevent jQuery from converting your FormData into a string 
       contentType: false, //jQuery does not add a Content-Type header for you 
       success: function (msg) { 
        alert(msg) 
       } 
      }); 
     }); 
    });