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 · 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

User · 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    lt  php      if   0  lt    FILES  file    error               echo  Error        FILES  file    error       lt br gt              else           move uploaded file   FILES  file    tmp name     uploads       FILES  file    name              gt      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

[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