javascript - Send variable from the form (POST) via ajax to another PHP script (GET) -
for last couple days i've tried find proper upload script files. when found 1 i've noticed use couple more features it. in script there simple form "browse" button, progress bar (ajax, jquery/js) , upload button. that's it. i'm trying add features form, choosing category of file. here's code upload_form.html
<!doctype html> <html> <head> <script> /* script written adam khoury @ developphp.com */ /* video tutorial: http://www.youtube.com/watch?v=eranfjiy0eg */ function _(el){ return document.getelementbyid(el); } function uploadfile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new formdata(); formdata.append("file1", file); var ajax = new xmlhttprequest(); ajax.upload.addeventlistener("progress", progresshandler, false); ajax.addeventlistener("load", completehandler, false); ajax.addeventlistener("error", errorhandler, false); ajax.addeventlistener("abort", aborthandler, false); ajax.open("post", "file_upload_parser.php"); ajax.send(formdata); } function progresshandler(event){ _("loaded_n_total").innerhtml = "uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressbar").value = math.round(percent); _("status").innerhtml = math.round(percent)+"% uploaded... please wait"; } function completehandler(event){ _("status").innerhtml = event.target.responsetext; _("progressbar").value = 0; } function errorhandler(event){ _("status").innerhtml = "upload failed"; } function aborthandler(event){ _("status").innerhtml = "upload aborted"; } </script> </head> <body> <h2>html5 file upload progress bar tutorial</h2> <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="file1" id="file1"><br> <input type="button" value="upload file" onclick="uploadfile()"> <progress id="progressbar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> </body> </html> and file_upload_parser.php
<?php $filename = $_files["file1"]["name"]; // file name $filetmploc = $_files["file1"]["tmp_name"]; // file in php tmp folder $filetype = $_files["file1"]["type"]; // type of file $filesize = $_files["file1"]["size"]; // file size in bytes $fileerrormsg = $_files["file1"]["error"]; // 0 false... , 1 true if (!$filetmploc) { // if file not chosen echo "error: please browse file before clicking upload button."; exit(); } if(move_uploaded_file($filetmploc, "test_uploads/$filename")){ echo "$filename upload complete"; } else { echo "move_uploaded_file function failed"; } ?> what want add more options form (like "select") , after pressing upload button, send variable form .php file , use function variable can use else, add file , category database. problem don't know how this. i've tried change upload button submit-type, it's not working (bad idea, know), i've tried add variables js code, (in case) it's not working well. can please me solve problem? grateful can get. regards
get parameters must added url. if form contains
<select id="menu"> ... </select> your javascript be:
function uploadfile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new formdata(); formdata.append("file1", file); var menuvalue = _("menu").value; var ajax = new xmlhttprequest(); ajax.upload.addeventlistener("progress", progresshandler, false); ajax.addeventlistener("load", completehandler, false); ajax.addeventlistener("error", errorhandler, false); ajax.addeventlistener("abort", aborthandler, false); ajax.open("post", "file_upload_parser.php?menu=" + menuvalue); ajax.send(formdata); } then php can use $_get['menu'] value of parameter.
btw, need change onclick onclick="uploadfile(); return false;". has return false prevent default form submission.
Comments
Post a Comment