Submitting a file with form data via ajax message

Question

I am trying to upload a file via ajax along with some fields on the form. However, this does not work. I get this error.

Undefined Index: - File

Here is my code.

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"; } 

What am I missing here?

Answer 1

Can you try using 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; }); 

The above is sample code, but you can use it to modify it.

Answer 2

you can use FormData p>

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

First, we need to recognize that we need to APPLY both the input data of the form and the form file in one variable FormData strong>.

Here is my solution in which I turned on the Multi File option so that this solution matches all the examples.

It is important to include the name attribute in input elements so that it works primarily on the server side in most cases. If you use C #, you can just use Request.Form ["nameAttribute"] to just get the function. It is similar to Java and other languages.

My sample code

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