this question has answer here:
- how can upload files asynchronously? 25 answers
<form method="post" action="#" onsubmit="uploadimage"> <input type="file" name="imgfile" > <input type="submit" id="submit" value="upload"> </form> how can upload image using javascript ajax call.
this quick javascript solution if want pure js.
var file = document.getelementbyid('id of input:file').files[0]; var ajax = new xmlhttprequest; var formdata = new formdata; formdata.append('imagefile', file); ajax.upload.addeventlistener("progress", myprogresshandler, false); ajax.addeventlistener('load', myonloadhandler, false); ajax.open('post', 'upload.php', true); ajax.send(formdata); note: sources calling ajax's open method should come after creating object (before work ajax in case) me never had troubles using way. it's you.
events:
function myprogresshandler(event) { //your code track upload progress var p = math.floor(event.loaded/event.total*100); document.title = p+'%'; } function myonloadhandler(event) { // code on finished upload alert (event.target.responsetext); } you can add more event handlers such "error" or "abort". course, need write upload.php handle uploaded files (php example; there lot of examples how on so).
all need make ajax call on "change" event of input-file element (upper part of code).
in addition, can write featurescheck function if user's browser doesn't support something, provide basic file upload instead.
function featurescheck() { var res = window.xmlhttprequest && window.formdata && window.addeventlistener; if (res) return true; else return false; } /* , test in code */ if (featurescheck()) { // use ajax upload } else { // use simple file uploader } if want use multiple property of file-input can't use .files[0] (first file selected) , you'll need loop through files list , separate uploads each of them (async of course).
be aware of security. double check of uploaded files before move them temp location (check mime type, extension, rename them).
