PHP AJAX file upload

Question

i've looked all over stackoverflow and the general internet and i can't find a simple AJAX file uploader (Just form submission). The ones i have found aren't flexible enough and don't fit my purpose. If i could ajust this script to file uploads, that would be great:

<script type="text/javascript">
 function upload(str)
 {
 if (str.length==0)
 { 
document.getElementById("txtHint").innerHTML="";
 return;
  }
 if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("hint").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","ajax/link.php?q="+str,true);
 xmlhttp.send();
 }

In the HTML i would have

<input type='file' onblur='upload(this.value)'>

Thanks

Alfred · Accepted Answer · 2012-04-10T16:20:42.500

7

Here is a simple ajax file uploader

Uploadify

And if you don't want flash, you may use this one;

AxUploader

edited Apr 10 '12 at 16:20

answered Apr 10 '12 at 15:01

Alfred

21,058
61
167
249

Thanks, I just used AxUploader. Thats exactly what i was looking for – Apr 11 '12 at 06:54

score 0 · Answer 2 · answered Apr 10 '12 at 15:03

It's not that easy. You can't use ajax directly to upload files. Think about the security issues that would cause? What if I put "/%USER%/Desktop/CreditCardsAndPasswords.txt" in your str field? In short, you need to find and use those 'non flexible' uploaders you were talking about and will have to edit them to your needs. Either that, or write one yourself to fit your purpose.

The way most 'ajax' uploaders work is they dynamically create Html input file elements, and submit a subset of your form (just the file element) to a php script on your website, which then saves the file to whatever temp directory. Then when you submit the rest of the form, you can 'catch up' with the rest of the script and handle whatever processing is necessary with the uploaded files.

There are many Many ajax 'uploaders' out there. Just do a search and find one, I can't believe all of the ones out there aren't good enough.

Hi, the problem with that is that i need to have single upload button, and once someone has clicked uploaded the file it automattically uploads. Only one file will be uploaded at a time. — , Apr 11 '12 at 06:37

score 0 · Answer 3 · answered Sep 29 '17 at 15:39

var data = new FormData();
data.append("image_upload",jQuery("#file_upload_input")[0].files[0]);
jQuery.ajax({
    url: 'url',
    type: 'POST',
    data: data,
    cache: false,
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
        console.log(data, textStatus, jqXHR);
    },
    error: function(jqXHR, textStatus, errorThrown)
    {

        console.log(jqXHR, textStatus, errorThrown);

    }
});

Please also check for the post_max_size ini variable, you will get it using echo phpinfo();

you have to set max file size you are going to upload. By default it is 5mb I think. and also check for the other ini variable required to increase the size of post data.

PHP AJAX file upload

3 Answers3

Linked