Error on uploading one image by ajax

Question

im having trouble in uploading a single file by ajax . here is my code.

JS file

var _submit = document.getElementById('fileInputBox');
var formData = new FormData();
formData.append('upload', 'upload'); 
formData.append('SelectedFile', _submit.files[0]);

$('#fileInputBox').on('change', function (e) {
  e.preventDefault();

  $.ajax({
    url: 'upload2.php',
    type: 'POST',
    data: formData,
    dataType: 'json' ,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
       $('#sep_s').html(data.msg); 
    }

 });

  // return false;
});

HTML file

  <form action="" method="post" enctype="multipart/form-data" name="UploadForm" id="UploadForm">

     <div id="AddFileInputBox">
          <input id="fileInputBox" style="margin-bottom: 5px;" type="file"  name="file"/>
     </div>
  </form>

PHP file

  if(isset($_POST['upload']))
  {
     $ImageName         = $_FILES['file']['name'];
     $ImageSize         = $_FILES['file']['size'];
        $TempSrc        = $_FILES['file']['tmp_name'];
      $ImageType        = $_FILES['file']['type'];
    ..........

And the error im getting is

Notice: Undefined index: file in G:\installed here\upload2.php on line 16
Notice: Undefined index: file in G:\installed here\upload2.php on line 17
and so on.

whats is wrong here ?

possible duplicate of [Uploading Image Using JQuery And Django](http://stackoverflow.com/questions/7252023/uploading-image-using-jquery-and-django) — Machavity, Aug 27 '14 at 19:23
@Machavity There's nothing in that question about the correct way to use `FormData`. — Barmar, Aug 27 '14 at 19:27

jeroen · Answer 1 · 2014-08-27T19:58:08.710

1

One problem I can see, is that you attach your image at page-load, not when it actually gets set / changes.

You should put that code in the event handler:

$('#fileInputBox').on('change', function () {

  // put this inside the function so that its get set when you assign a value
  var _submit = document.getElementById('fileInputBox');
  var formData = new FormData();
  formData.append('upload', 'upload'); 
  formData.append('SelectedFile', _submit.files[0]);

  $.ajax({
    url: 'upload2.php',
    type: 'POST',
    data: formData,
    dataType: 'json' ,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
       $('#sep_s').html(data.msg); 
    }

  });
});

edited Aug 27 '14 at 19:58

answered Aug 27 '14 at 19:27

jeroen

91,079
21
114
132

There's probably no need for `e.preventDefault()`. Changing a file input doesn't have any additional default action. – Barmar Aug 27 '14 at 19:29
Thanks , so much , yours also works , + to rename file to SelectedFile. – Karim Daraf Aug 27 '14 at 19:42
@Barmar You're right, I didn't even notice, just copied the OP's code... – jeroen Aug 27 '14 at 19:57

Musa · Accepted Answer · 2014-08-27T19:45:14.453

0

You use SelectedFile as the parameter in formdata but use file in php, e.g

$ImageName = $_FILES['SelectedFile']['name'];

Also you need to get the file to upload inside the change event handler, that is when the file is actually selected.

$('#fileInputBox').on('change', function (e) {
  var _submit = document.getElementById('fileInputBox');
  var formData = new FormData();
  formData.append('upload', 'upload'); 
  formData.append('SelectedFile', _submit.files[0]);
  ...

edited Aug 27 '14 at 19:45

answered Aug 27 '14 at 19:25

Musa

96,336
17
118
137

this also im getting `Undefined index: SelectedFile in ...` – Karim Daraf Aug 27 '14 at 19:27
Waw thanks:) you saved me :) . It works like a charm, i didnt know that i must have them inside change handler . Thanks so much. – Karim Daraf Aug 27 '14 at 19:40

Error on uploading one image by ajax

2 Answers2