Passing PHP variable directly to Javascript, bypassing AJAX, how? -

Passing PHP variable directly to Javascript, bypassing AJAX, how? -

i have next javascript verifies , passes 'artwork' file php script on server, has redundant verification of own (one can never safe) , writes file /uploads.

i need dump $basename php variable in final state javascript write hidden input (id="artwork_filename").

i can echo $basename 'success' handler, feels inelegant have capture $basename , strip out of result - want elegant solution, preferably passing $basename straight variable on javascript.

javascript:

class="snippet-code-js lang-js prettyprint-override"> <script> function _(el) { homecoming document.getelementbyid(el); } function uploadfile() { var file = _("file").files[0]; if (file == null) { _("status").innerhtml = "<span style=" + '"color: black;">' + "please select file before clicking upload</span>"; } //alert(file.name+" | "+file.size+" | "+file.type); if (file.type==="application/zip" || file.type==="application/x-zip" || file.type==="application/x-zip-compressed") { if (file.size < 52428800) { var formdata = new formdata(); formdata.append("file", file); var ajax = new xmlhttprequest(); ajax.upload.addeventlistener("progress", progresshandler, false); ajax.addeventlistener("load", completehandler, false); ajax.addeventlistener("abort", aborthandler, false); ajax.open("post", "upload_artwork.php"); ajax.send(formdata); } else { //alert("file big! max upload size 50mb. upload bigger file, please contact instructions"); _("status").innerhtml = "<span style=" + '"color: red;">' + "file big! max upload size 50mb</span>"; exit(); } } else { _("status").innerhtml = "<span style=" + '"color: red;">' + "upload stopped! did 'zip' file?</span>"; exit(); } } function progresshandler(event) { //_("loaded_n_total").innerhtml = "uploaded: "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progress_bar").value = math.round(percent); _("status").innerhtml = math.round(percent)+"% uploaded... please wait"; } function completehandler(event) { _("status").innerhtml = event.target.responsetext; _("progress_bar").value = 0; } function errorhandler(event) { _("status").innerhtml = "<span style=" + '"color: red;">' + "upload failed! notify site administrator</span>"; } function aborthandler(event) { _("status").innerhtml = "<span style=" + '"color: red;">' + "upload aborted! please seek again</span>"; } </script> class="snippet-code-html lang-html prettyprint-override"><input id="artwork_filename" type="hidden" name="custom" value="" />

php:

class="lang-php prettyprint-override"><?php $allowedexts = array("zip", "rar"/*, "ai", "eps", "psd", "bmp", "jpg", "png", "tiff"*/); if (@$_files['file'] == null) { echo "<span style=" . '"color: red;">' . "please take file before clicking upload</span>"; exit(); } else { $filename = $_files["file"]["name"]; $filetmploc = $_files["file"]["tmp_name"]; $filetype = $_files["file"]["type"]; $filesize = $_files["file"]["size"]; $fileerrormsg = $_files["file"]["error"]; $temp = explode(".", $_files["file"]["name"]); $name = pathinfo($_files["file"]["name"], pathinfo_filename); $extension = pathinfo($_files['file']['name'], pathinfo_extension); $i = ''; } //check max file size breach //or not: stop on js side prevent long file upload //and alerting user file big! //(also prevents sidestepping ugly php error kickout if file big. if ((($_files["file"]["type"] == "application/zip") || ($_files["file"]["type"] == "application/x-zip") || ($_files["file"]["type"] == "application/x-zip-compressed") //|| ($_files["file"]["type"] == "application/x-rar-compressed") /*|| ($_files["file"]["type"] == "application/postscript") || ($_files["file"]["type"] == "image/vnd.adobe.photoshop") || ($_files["file"]["type"] == "image/bmp") || ($_files["file"]["type"] == "image/jpg") || ($_files["file"]["type"] == "image/png") || ($_files["file"]["type"] == "image/tiff")*/) && ($_files["file"]["size"] < 52428800) && in_array($extension, $allowedexts)) { if ($_files["file"]["error"] > 0) { echo "upload error! please notify site administrator"; } else { if (file_exists("upload/" . $name . $i . '.' . $extension)) { while(file_exists("upload/" . $name . $i . '.' . $extension)) { $i++; } $basename = $name . $i . '.' . $extension; if(move_uploaded_file($_files["file"]["tmp_name"], "upload/" . $basename)) { echo "<span style=" . '"color: green;">' . "artwork uploaded</span>"; } else { echo "<span style=" . '"color: red;">' . "upload error! please contact site administrator , study issue</span>"; } } else { if(move_uploaded_file($filetmploc, "upload/$filename")) { echo "<span style=" . '"color: green;">' . "artwork uploaded</span>"; } else { echo "<span style=" . '"color: red;">' . "upload error! please contact site administrator , study issue</span>"; } } } } else { error_reporting(e_error ^ e_parse); echo "<span style=" . '"color: red;">' . "upload stopped! did 'zip' file?</span>"; } ?>

in opinion, utilize ajax, , seperate concerns better. allow php handle updload , homecoming info on has happened. allow javasctipt perform ajax request , update dom appropriate when request complete, using info returned. allow css handle styling. want have alter javascript , php if want alter styling of message container?

my php little rusty , utilize jquery ajax next may need "massaging" right should on way.

php

<?php $allowedexts = array("zip", "rar"); if (@$_files['file'] == null) { $dataout["success"] = false; $dataout["message"] = 'please take file before clicking upload'; $dataout["basename"] = ''; exit(); } else { $filename = $_files["file"]["name"]; $filetmploc = $_files["file"]["tmp_name"]; $filetype = $_files["file"]["type"]; $filesize = $_files["file"]["size"]; $fileerrormsg = $_files["file"]["error"]; $temp = explode(".", $_files["file"]["name"]); $name = pathinfo($_files["file"]["name"], pathinfo_filename); $extension = pathinfo($_files['file']['name'], pathinfo_extension); $i = ''; $dataout["success"] = false; $dataout["message"] = ''; $dataout["basename"] = ''; } //check fucking max file size breach //or not: stop on js side prevent long file upload //and alerting user file big! //(also prevents sidestepping ugly php error kickout if file big. if ((($_files["file"]["type"] == "application/zip") || ($_files["file"]["type"] == "application/x-zip") || ($_files["file"]["type"] == "application/x-zip-compressed") ) && ($_files["file"]["size"] < 52428800) && in_array($extension, $allowedexts)) { if ($_files["file"]["error"] > 0) { echo "upload error! please notify site administrator"; } else { if (file_exists("upload/" . $name . $i . '.' . $extension)) { while(file_exists("upload/" . $name . $i . '.' . $extension)) { $i++; } $basename = $name . $i . '.' . $extension; $dataout["basename"] = $basename; if(move_uploaded_file($_files["file"]["tmp_name"], "upload/" . $basename)) { $dataout["success"] = true; $dataout["message"] = "artwork uploaded"; } else { $dataout["success"] = false; $dataout["message"] = "upload error! please contact site administrator , study issue"; } } else { if(move_uploaded_file($filetmploc, "upload/$filename")) { $dataout["success"] = true; $dataout["message"] = "artwork uploaded"; } else { $dataout["success"] = false; $dataout["message"] = "upload error! please contact site administrator , study issue"; } } } } else { error_reporting(e_error ^ e_parse); $dataout["success"] = false; $dataout["message"] = "upload stopped! did 'zip' file?"; } echo json_encode($dataout); ?>

class="snippet-code-js lang-js prettyprint-override"><script> function _(el) { homecoming document.getelementbyid(el); } function setstats(status, message){ if(status === null){ _("status").classname = "info"; }else if(status){ _("status").classname = "success"; }else{ _("status").classname = "error"; } _("status").innerhtml = message; } function uploadfile() { var file = _("file").files[0]; if (file == null) { setstatus(null, "please select file before clicking upload"); } //alert(file.name+" | "+file.size+" | "+file.type); if (file.type==="application/zip" || file.type==="application/x-zip" || file.type==="application/x-zip-compressed") { if (file.size < 52428800) { var formdata = new formdata(); formdata.append("file", file); var ajax = new xmlhttprequest(); ajax.responsetype = "json"; ajax.upload.addeventlistener("progress", progresshandler, false); ajax.addeventlistener("load", completehandler, false); ajax.addeventlistener("abort", aborthandler, false); ajax.open("post", "upload_artwork.php"); ajax.send(formdata); } else { //alert("file big! max upload size 50mb. upload bigger file, please contact instructions"); setstatus(false,"file big! max upload size 50mb"); exit(); } } else { setstatus(false, "upload stopped! did 'zip' file?"); exit(); } } function progresshandler(event) { //_("loaded_n_total").innerhtml = "uploaded: "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progress_bar").value = math.round(percent); _("status").innerhtml = math.round(percent)+"% uploaded... please wait"; } function completehandler(event) { var jdata = json.parse(event.target.responsetext); document.getelementbyid("artwork_filename").value = jdata["basename"]; setstatus(jdata["success"], jdata["message"] ); _("progress_bar").value = 0; } function errorhandler(event) { setstatus(false,"upload failed! notify site administrator"); } function aborthandler(event) { setstatus(flase,"upload aborted! please seek again"); } </script> class="snippet-code-css lang-css prettyprint-override">.info {color:#000;} .error {color:#f00;} .success {color:#0f0;} class="snippet-code-html lang-html prettyprint-override"><input id="artwork_filename" type="hidden" name="custom" value="" />

there other improvements make, should starting point.

javascript php ajax variables