AJAX पोस्ट

Question

के माध्यम से फ़ॉर्म डेटा के साथ फ़ाइल भेजना मैं एक फॉर्म में कुछ फ़ील्ड के साथ AJAX के माध्यम से एक फ़ाइल अपलोड करने का प्रयास कर रहा हूं। हालांकि, यह काम नहीं करता है। मुझे यह त्रुटि मिलती है।

अपरिभाषित सूचकांक: - फ़ाइल

यहाँ मेरी कोड है।

एचटीएमएल

<!-- File Button --> 
    <div class="form-group"> 
    <label class="col-md-4 control-label" for="file">Upload Software/File</label> 
    <div class="col-md-4"> 
    <input id="file" name="file" class="input-file" type="file"> 
    </div> 
    </div> 

<div class="form-group"> 
<label class="col-md-4 control-label" for="price">Price($)</label> 
<div class="col-md-4"> 
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div> 
</div> 

अजाक्स

$("#add_product").click(function(e){ 
    e.preventDefault(); 
    product_name = $("product_name").val(); 
    //d = $("#add_new_product").serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'ajax.php', 
     data: $("#add_new_product").serialize(), 
     success: function(response) 
     { 
      // 
      alert(response); 

     } 
    }) 
}); 

पीएचपी

if (0 < $_FILES['file']['error']) 
{ 
echo ":!"; 
} 
else 
{ 
echo "ASa"; 
} 

मैं यहाँ क्या याद आ रही है?

Answer 1

उपयोग कर सकते हैं:

$("form#files").submit(function(){ 

    var formData = new FormData($(this)[0]); 

    $.ajax({ 
     url: window.location.pathname, 
     type: 'POST', 
     data: formData, 
     async: false, 
     success: function (data) { 
      alert(data) 
     }, 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 

    return false; 
}); 

ऊपर एक नमूना कोड है, लेकिन आप इसे संशोधित करने के लिए इसका इस्तेमाल कर सकते।

Answer 2

क्या आप FormData() उपयोग करके देख सकते FormData

$("#add_product").click(function(e){ 
 
    e.preventDefault(); 
 
    var fdata = new FormData() 
 
    
 
    fdata.append("product_name",$("product_name").val()); 
 
    
 
    if($("#file")[0].files.length>0) 
 
     fdata.append("file",$("#file")[0].files[0]) 
 
    //d = $("#add_new_product").serialize(); 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: 'ajax.php', 
 
     data:fdata, 
 
     contentType: false, 
 
     processData: false, 
 
     success: function(response) 
 
     { 
 
      // 
 
      alert(response); 
 

 
     } 
 
    }) 
 
});

<!-- File Button --> 
 
    <div class="form-group"> 
 
    <label class="col-md-4 control-label" for="file">Upload Software/File</label> 
 
    <div class="col-md-4"> 
 
    <input id="file" name="file" class="input-file" type="file"> 
 
    </div> 
 
    </div> 
 

 
<div class="form-group"> 
 
<label class="col-md-4 control-label" for="price">Price($)</label> 
 
<div class="col-md-4"> 
 
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
 
</div> 
 
</div>

Answer 3

हमें पहले स्वीकार करना होगा कि हमें फॉर्म इनपुट डेटा और फॉर्म फ़ाइल दोनों को एक फॉर्मडाटा चर में अपनाने की आवश्यकता है।

यहां मेरा समाधान है जिसमें मैंने मल्टी फ़ाइल विकल्प सक्षम किया है ताकि यह समाधान सभी उदाहरणों के लिए उपयुक्त हो सके।

यह नाम शामिल करने के लिए महत्वपूर्ण है इनपुट में विशेषता यह अधिकांश मामलों में सर्वर साइड पर ठीक से काम करने के लिए नियंत्रित करता है। यदि आप सी # का उपयोग कर रहे हैं तो आप फ़ंक्शन प्राप्त करने के लिए बस Request.Form ["nameAttribute"] का उपयोग कर सकते हैं। यह जावा और अन्य भाषाओं के लिए समान है।

मेरे नमूना कोड है

$(document).ready(function() //Setting up on Document to Ready Function 
 
    { 
 
     $("#btnUpload").click(function (event) { 
 

 
      //getting form into Jquery Wrapper Instance to enable JQuery Functions on form      
 
      var form = $("#myForm1"); 
 

 
      //Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later. 
 
      var params = form.serializeArray(); 
 

 
      //Getting Files Collection 
 
      var files = $("#File1")[0].files; 
 

 
      //Declaring new Form Data Instance 
 
      var formData = new FormData(); 
 

 
      //Looping through uploaded files collection in case there is a Multi File Upload. This also works for single i.e simply remove MULTIPLE attribute from file control in HTML. 
 
      for (var i = 0; i < files.length; i++) { 
 
       formData.append(files[i].name, files[i]); 
 
      } 
 
      //Now Looping the parameters for all form input fields and assigning them as Name Value pairs. 
 
      $(params).each(function (index, element) { 
 
       formData.append(element.name, element.value); 
 
      }); 
 

 
      //disabling Submit Button so that user cannot press Submit Multiple times 
 
      var btn = $(this); 
 
      btn.val("Uploading..."); 
 
      btn.prop("disabled", true); 
 

 
      $.ajax({ 
 
       url: "Handler.ashx", //You can replace this with MVC/WebAPI/PHP/Java etc 
 
       method: "post", 
 
       data: formData, 
 
       contentType: false, 
 
       processData: false, 
 
       success: function() { 
 
        //Firing event if File Upload is completed! 
 
        alert("Upload Completed"); 
 
        btn.prop("disabled", false); 
 
        btn.val("Submit"); 
 
        $("#File1").val(""); 
 

 
       }, 
 
       error: function (error) { alert("Error"); } 
 

 
      }); 
 

 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form enctype="multipart/form-data" method="post" id="myForm1"> 
 
    <p><textarea id="TextArea1" rows="2" cols="20" name="TextArea1"></textarea></p> 
 
    <p><input id="File1" type="file" multiple="multiple" /></p> 
 
    <input id="btnUpload" type="button" value="Submit" /> 
 
    </form>