jQuery AJAX file upload PHP

Question

I want to implement a simple file upload in my intranet-page  with the smallest setup possible   This is my HTML part    lt input id  sortpicture  type  file  name  sortpic    gt   lt button id  upload  gt Upload lt  button gt    and this is my JS jquery script       upload   on  click   function         var file data       sortpicture   prop  files   0          var form data   new FormData        form data append  file   file data       alert form data         ajax           url    uploads           dataType   script           cache  false          contentType  false          processData  false          data  form data                                   type   post           success  function                alert  works                             There is a folder named  uploads  in the root directory of the website  with change permissions for  users  and  IIS users    When I select a file with the file-form and press the upload button  the first alert returns   object FormData    the second alert doesn t get called and the uploads  folder is empty too    Can someone help my finding out whats wrong   Also the next step should be  to rename the file with a server side generated name  Maybe someone can give me a solution for this  too

User · Accepted Answer

You need a script that runs on the server to move the file to the uploads directory. The jQuery ajax method (running in the browser) sends the form data to the server, then a script on the server handles the upload. Here's an example using PHP.

Your HTML is fine, but update your JS jQuery script to look like this:

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

And now for the server-side script, using PHP in this case.

upload.php: a PHP script that runs on the server and directs the file to the uploads directory:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

Also, a couple things about the destination directory:

Make sure you have the correct server path, i.e., starting at the PHP script location what is the path to the uploads directory, and
Make sure it's writeable.

And a little bit about the PHP function move_uploaded_file, used in the upload.php script:

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name'] is the name of the file as it is uploaded. You don't have to use that. You can give the file any name (server filesystem compatible) you want:

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

And finally, be aware of your PHP upload_max_filesize AND post_max_size configuration values, and be sure your test files do not exceed either. Here's some help how you check PHP configuration and how you set max filesize and post settings.

User · Answer

Use pure js   x000D   x000D  async function saveFile    x000D    x000D      let formData   new FormData               x000D      formData append  file   sortpicture files 0    x000D      await fetch   uploads    method   POST   body  formData        x000D      alert  works    x000D    x000D   lt input id  sortpicture  type  file  name  sortpic    gt  x000D   lt button id  upload  onclick  saveFile    gt Upload lt  button gt  x000D   lt br gt Before click upload look on chrome gt console gt network  in this snipped we will see 404  x000D   x000D   x000D    The filename is automatically included to request and server can read it  the  content-type  is automatically set to  multipart form-data   Here is more developed example with error handling and additional json sending   x000D   x000D  async function saveFile inp   x000D    x000D      let user     name  john   age 34    x000D      let formData   new FormData    x000D      let photo   inp files 0         x000D            x000D      formData append  photo   photo   x000D      formData append  user   JSON stringify user      x000D       x000D      try   x000D         let r   await fetch   upload image    method   POST   body  formData     x000D         console log  HTTP response code   r status    x000D         alert  success    x000D        catch e    x000D         console log  Huston we have problem       e   x000D        x000D       x000D    x000D   lt input type  file  onchange  saveFile this    gt  x000D   lt br gt  lt br gt  x000D  Before selecting the file Open chrome console  gt  network tab to see the request details  x000D   lt br gt  lt br gt  x000D   lt small gt Because in this example we send request to https   stacksnippets net upload image the response code will be 404 ofcourse    lt  small gt  x000D   x000D   x000D

User · Answer

Best File Upload Using Jquery Ajax With Materialise Click Here to Download  When you select image the image will be Converted in base 64 and you can store this in to database so it will be light weight also

User · Answer

and this is the php file to receive the uplaoded files   lt    data   array          check with your logic     if  isset   FILES              error   false           files   array              uploaddir    target dir          foreach    FILES as  file                if  move uploaded file  file  tmp name     uploaddir   basename   file  name                         files      uploaddir    file  name                  else                    error   true                                   data     error    array  error    gt   There was an error uploading your files     array  files    gt   files         else            data   array  success    gt   NO FILES ARE SENT   formData    gt    REQUEST              echo json encode  data     gt

User · Answer

1  index php    lt body gt       lt span id  msg  style  color red  gt  lt  span gt  lt br  gt       lt input type  file  id  photo  gt  lt br  gt     lt script type  text javascript  src  jquery-3 2 1 min js  gt  lt  script gt     lt script type  text javascript  gt        document  ready function            document  on  change    photo  function            var property   document getElementById  photo   files 0           var image name   property name          var image extension   image name split      pop   toLowerCase             if jQuery inArray image extension   gif   jpg   jpeg          -1             alert  Invalid image file                       var form data   new FormData            form data append  file  property             ajax             url  upload php             method  POST             data form data            contentType false            cache false            processData false            beforeSend function                    msg   html  Loading                                 success function data               console log data                   msg   html data                                                lt  script gt   lt  body gt     2 upload php    lt  php if   FILES  file    name                test   explode        FILES  file    name          extension   end  test            name   rand 100 999       extension        location    uploads    name      move uploaded file   FILES  file    tmp name     location        echo   lt img src     location    height  100  width  100    gt

User · Answer

var formData   new FormData     YOUR FORM ID   0      ajax       url   upload php       type   POST       data   formData      processData  false      contentType  false      beforeSend  function                 success  function data                  error  function xhr  ajaxOptions  thrownError           console log thrownError     r n    xhr statusText     r n    xhr responseText

[javascript] jQuery AJAX file upload PHP

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to upload