File Upload without Form

Question

Without using any forms whatsoever  can I just send a file files from  lt input type  file  gt  to  upload php  using POST method using jQuery  The input tag is not inside any form tag  It stands individually  So I don t want to use jQuery plugins like  ajaxForm  or  ajaxSubmit

User · Answer

Try this puglin simpleUpload  no need form  Html    lt input type  file  name  arquivo  id  simpleUpload  multiple  gt   lt button type  button  id  enviar  gt Enviar lt  button gt    Javascript       simpleUpload   simpleUpload     url   upload php     trigger    enviar     success  function data       alert  Envio com sucesso

User · Answer

You can use FormData to submit your data by a POST request  Here is a simple example   var myFormData   new FormData    myFormData append  pictureFile   pictureInput files 0       ajax     url   upload php     type   POST     processData  false     important   contentType  false     important   dataType    json     data  myFormData       You don t have to use a form to make an ajax request  as long as you know your request setting  like url  method and parameters data

User · Answer

Step 1  Create HTML Page where to place the HTML Code   Step 2  In the HTML Code Page Bottom footer Create Javascript   and put Jquery Code in Script tag   Step 3  Create PHP File and php code copy past  after Jquery Code in   ajax Code url apply which one on your php file name   JS      document  on  change     avatar   function          If you want to upload without a submit button    document  on  click     upload   function       var file data       avatar   prop  files   0      Getting the properties of file from file field   var form data   new FormData       Creating object of FormData class   form data append  file   file data     Appending parameter named file with properties of file field to form data   form data append  user id   123     Adding extra parameters to form data     ajax       url    upload avatar      Upload Script     dataType   script       cache  false      contentType  false      processData  false      data  form data     Setting the data attribute of ajax with file data     type   post       success  function data             Do something after Ajax completes                    HTML   lt input id  avatar  type  file  name  avatar    gt   lt button id  upload  value  Upload    gt    Php  print r   FILES   print r   POST

User · Answer

Sorry for being that guy but AngularJS offers a simple and elegant solution   Here is the code I use    x000D   x000D  ngApp controller  ngController      upload   x000D  function  upload    x000D   x000D     scope Upload   function  files  index    x000D      for  var i   0  i  lt   files length  i      x000D        var file    files i   x000D         scope upload    upload upload   x000D          file  file  x000D          url    File Upload   x000D          data    x000D            id  1   some data you want to send along with the file  x000D            name   ABC    some data you want to send along with the file  x000D             x000D   x000D           progress function evt    x000D   x000D           success function data  status  headers  config    x000D            alert  Upload done    x000D            x000D           x000D       error function message    x000D        alert  Upload failed    x000D          x000D      x000D     x000D       x000D   Hidden   x000D    display  none x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div data-ng-controller  ngController  gt  x000D     lt input type  button  value  Browse  onclick    this  next   click       gt  x000D     lt input type  file  ng-file-select  Upload  files  1   class  Hidden    gt  x000D   lt  div gt  x000D   x000D   x000D    On the server side I have an MVC controller with an action the saves the files uploaded found in the Request Files collection and returning a JsonResult    If you use AngularJS try this out  if you don t    sorry mate  -

User · Answer

Basing on this tutorial  here a very basic way to do that      your trigger element selector   on  click   function            var data   new FormData        data append  input file name      your file input selector   prop  files   0           append other variables to data if you want  data append  field name x   field value x          ajax           type   POST                          processData  false     important         contentType  false     important         data  data          url  your ajax path          dataType    json                in PHP you can call and process file in the same way as if it was submitted from a form               FILES  input file name           success  function jsonData                                                        Don t forget to add proper error handling

User · Answer

All answers here are still using the FormData API  It is like a  multipart form-data  upload without a form  You can also upload the file directly as content inside the body of the POST request using xmlHttpRequest like this   var xmlHttpRequest   new XMLHttpRequest     var file      file handle    var fileName      file name    var target      target    var mimeType      mime type     xmlHttpRequest open  POST   target  true   xmlHttpRequest setRequestHeader  Content-Type   mimeType   xmlHttpRequest setRequestHeader  Content-Disposition    attachment  filename      fileName         xmlHttpRequest send file     Content-Type and Content-Disposition headers are used for explaining what we are sending  mime-type and file name    I posted similar answer also here

[javascript] File Upload without Form

Examples related to javascript

Examples related to jquery

Examples related to html