Wysyłanie pliku wraz z danymi formularza przez ajax post

Question

Próbuję przesłać plik przez ajax wraz z niektórymi polami w formularzu. Jednak to nie działa. Dostaję ten błąd.

Undefined Index: - File

Oto mój kod.

HTML

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

Ajax

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

     } 
    }) 
}); 

PHP

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

Co ja tu brakuje?

Answer 1

można spróbować użyć FormData():

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

Powyższe jest przykładowy kod, ale można go używać, aby go zmodyfikować.

Answer 2

można użyć 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

Najpierw musimy potwierdzić, że musimy ZAŁĄCZYĆ zarówno dane wejściowe formularza, jak i pliki formularzy do pojedynczej zmiennej FormData.

Oto moje rozwiązanie, w którym włączyłem opcję Multi File, aby to rozwiązanie pasowało do wszystkich przykładów.

Jest Ważne zawierać nazwę atrybut na wejściu kontroluje, aby to działało poprawnie po stronie serwera w większości przypadków. Jeśli używasz C#, możesz użyć po prostu Request.Form ["nameAttribute"], aby uzyskać tę funkcję. Jest podobny do Javy i innych języków.

Moja Przykładowy kod jest

$(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>