javascript - how to send input text value -
my problem don't know how send inputs text values code below.
i find code in website don't know how send inputs text values because send files.
<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]; var name = _("name").value; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new formdata(); formdata.append("file1", file); formdata.append("name", 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> <input type="text" name="name" placeholder="title" id="name"/> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> and php code :
<?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 $name = $_post['name']; if (!$filetmploc) { // if file not chosen echo "error: please browse file before clicking upload button."; exit(); } if(move_uploaded_file($filetmploc, "$filename")){ echo "$filename upload complete $name"; } else { echo "move_uploaded_file function failed"; } ?> please me editing code , thank you.
you need change code
edit js from
var formdata = new formdata(); formdata.append("file1", file); formdata.append("name", file); // important : edit js to
var formdata = new formdata(); formdata.append("file1", file); formdata.append("name", name); // important : front end code
<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]; var name = _("name").value; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new formdata(); formdata.append("file1", file); ///////////////////////////////////////////////////////////////////// formdata.append("name", name); ////// formdata.append("name", 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> <input type="text" name="name" placeholder="title" id="name"/> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> php code
$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 $name = $_post['name']; if (!$filetmploc) { // if file not chosen echo "error: please browse file before clicking upload button."; exit(); } if(move_uploaded_file($filetmploc, $filename)){ echo $filename . 'upload complete ' . $name; } else { echo "move_uploaded_file function failed"; } 
Comments
Post a Comment