-1

I have an HTML form that I am trying to upload an image through.

<form id="imageform" method="post" enctype="multipart/form-data" action='upload.php'>
    Upload image <input type="file" name="file" id="file" />
</form>

<div id='preview'>
</div>

I want to use JavaScript to upload run upload.php, so the page does not have to refresh. I then want to display the output in #preview.

$(document).ready(function() { 
    $('#file').live('change', function() {
        $("#preview").html('');
        $("#preview").html('Uploading...');
        $.post("upload.php",$("#imageform").serialize(), function(data){
            $("#preview").html(data);
        });
    });
});

However, I get many errors like these within the div. I know that the data isn't being sent through, but how can I fix it?

Notice: Undefined index: file in /path/upload.php on line 14

I've searched through things on Google, but I have been receiving the same issue.

user3320550
  • 123
  • 1
  • 2
  • 9
  • The index named "file" is not in place, that is what the Notice is saying, it is pretty clear :-) , try to print_r the $_REQUEST array and see what indexes are in there, for instance – Ma'moon Al-Akash May 26 '14 at 23:00
  • @Ma'moonAl-Akash I understand that part. I was wondering how can I alter my JavaScript to properly send the image data through to the PHP file. – user3320550 May 26 '14 at 23:02

2 Answers2

-2

You cannot send files through AJAX. In this manner, anyway. You need to use the new HTML5 way of doing it: e.g. http://blog.teamtreehouse.com/uploading-files-ajax or use some sort of plug-in which utilises some iframe hacks: e.g. https://github.com/blueimp/jQuery-File-Upload

sahbeewah
  • 2,690
  • 1
  • 12
  • 18
-3

You need to turn off the error reporting in PHP or fix your error in upload.php. PHP error reporting: http://www.php.net/manual/en/function.error-reporting.php

E.g.

error_reporting(0);
Lachezar
  • 6,523
  • 3
  • 33
  • 34
  • 1
    I wouldn't really go with "hiding" errors this, this is simply "hiding" the notices, errors, and warnings instead of "fixing" them! – Ma'moon Al-Akash May 26 '14 at 23:03
  • Yes, however, the image itself is not being uploaded. The PHP file works fine, I know that, it's an issue with getting the data through to the PHP file with JavaScript. – user3320550 May 26 '14 at 23:03
  • Then read how to send file with AJAX - http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery – Lachezar May 26 '14 at 23:05