Uploading an image using jquery, instant uploading

Question

how can i upload an image using jQuery so it wont have to refresh the page? so i can use the uploaded image. i have no idea how to submit a file through jQuery :/

if i have the following form

<form action = "myCurrentPage" method = "POST" enctype = "multipart/form-data">
    <input type = "file" name = "LogoImage" id = "LogoImage">
</form>

Only way I know is to post to an Iframe.. here is a link http://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/ — John Hartsock, Jul 03 '14 at 21:02
There are also stackoverflow questions that relate... http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery?rq=1 — John Hartsock, Jul 03 '14 at 21:05
http://stackoverflow.com/questions/24168040/upload-multiple-files-with-php-and-jquery/24168617#24168617 — Alexander Ceballos, Jul 03 '14 at 22:25

score 0 · Answer 1 · answered Jul 03 '14 at 21:09

HTML:

<form id='myForm' onsubmit='doUpload()' action = "javascript:void(0)" method = "POST" enctype = "multipart/form-data">
    <input type = "file" name = "LogoImage" id = "LogoImage">
</form>

Javascript:

function doUpload() {


var formData = new FormData(document.getElementById("myForm"));


$.ajax({
   url:            "/admin/scripts/addpet.php",
   dataType:       "xml",
   type:           "POST",
   processData:    false,
   contentType:    false,
   data:           formData
}).done(function(xmlDoc) {
});

}

On your php side you grab the file like you normally would. $_FILES['fileName']['tmp_name']

Uploading an image using jquery, instant uploading

1 Answers1