I get a "Uncaught TypeError: dataString.append is not a function" when i tried to append a file data to ajax data string.

So here is my code

HTML:

<input type="file" id="upload" name="upload">

Ajax:

var name = document.getElementById("name").value;
var address1 = document.getElementById("address").value;
var dataString = '&name=' + name +
                 '&address1=' + address1 ;
var fuData = document.getElementById('upload');
var FileUploadPath = fuData.value;
if (FileUploadPath == '') {
           alert("Please upload an image");                                         
 } else {
dataString.append( "upload", $("#upload")[0].files[0]);
   }
$.ajax({
           type: "post",
           url: ".../upload.php",
           data: dataString,
           cache: false,
           success: function (data) {
              var pkg = JSON.parse(data);
              if (pkg.status) {
                  var rs_items = pkg.result_data;
                  //var msg = pkg.quote;
                  // alert(pkg.result_data);
                  alert('saved');
                 //('#msg').html(msg);
              } else {
                   //alert(pkg.msg);
               }
             }
  });

If some one can suggest a better way to send specific form data with a image upload to a PHP,it would be a great help.

I get a "Uncaught TypeError: dataString.append is not a function" when i tried to append a file data to ajax data string.

So here is my code

HTML:

<input type="file" id="upload" name="upload">

Ajax:

var name = document.getElementById("name").value;
var address1 = document.getElementById("address").value;
var dataString = '&name=' + name +
                 '&address1=' + address1 ;
var fuData = document.getElementById('upload');
var FileUploadPath = fuData.value;
if (FileUploadPath == '') {
           alert("Please upload an image");                                         
 } else {
dataString.append( "upload", $("#upload")[0].files[0]);
   }
$.ajax({
           type: "post",
           url: ".../upload.php",
           data: dataString,
           cache: false,
           success: function (data) {
              var pkg = JSON.parse(data);
              if (pkg.status) {
                  var rs_items = pkg.result_data;
                  //var msg = pkg.quote;
                  // alert(pkg.result_data);
                  alert('saved');
                 //('#msg').html(msg);
              } else {
                   //alert(pkg.msg);
               }
             }
  });

If some one can suggest a better way to send specific form data with a image upload to a PHP,it would be a great help.

• javascript
• php
• jquery
• ajax

Share Improve this question Follow edited Mar 29, 2016 at 11:41 Muhammad Arif 1,02233 gold badges2323 silver badges5959 bronze badges asked Mar 29, 2016 at 11:38 menakamenaka 1,06811 gold badge1414 silver badges3535 bronze badges 1

• are you trying ajax file upload? – Syed mohamed aladeen Commented Mar 29, 2016 at 11:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can use FormData for this purpose :

var formData = new FormData();
formData.append('upload', $("#upload")[0].files[0]); 

$.ajax({
    type: "post",
    url: '.../upload.php',
    data: formData,
    contentType: false,
    processData: false,
})