将PHP变量直接传递给Javascript，绕过AJAX，怎么样？

时间：2014-10-13 03:07:03

标签： javascript php ajax variables

我有以下javascript验证并传递＆＃39;艺术品＆＃39;将文件发送到我服务器上的PHP脚本，然后对其自身进行冗余验证（一个永远不会太安全），然后将文件写入/上传。

我需要将$basename PHP变量的最终状态转储回javascript，然后将其写入隐藏输入（ID="artwork_filename"）。

我可以将$ basename回应成功＆＃39;处理程序，但它感觉非常优雅，然后必须捕获$basename并将其从结果中删除 - 我想要一个优雅的解决方案，最好将$basename直接传递给javascript上的变量。

使用Javascript：

＆＃13;
＆＃13; 
	<script>
	  function _(el) {
	    return document.getElementById(el);
	  }
	  function uploadFile() {
	    var file = _("file").files[0];
		if (file == null) {
		  _("status").innerHTML = "<span style=" + '"color: black;">' + "Please select a 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 is too big! Max upload size is 50MB. To upload a bigger file, please contact us for instructions");
			_("status").innerHTML = "<span style=" + '"color: red;">' + "File is too big! Max upload size is 50MB</span>";
			exit();
		  }
		} else {
		  _("status").innerHTML = "<span style=" + '"color: red;">' + "Upload stopped! Did you 'zip' your 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 try again</span>";
	  }
	</script>
＆＃13; 
<input id="artwork_filename" type="hidden" name="custom" value="" />
＆＃13;
＆＃13;
＆＃13;

PHP：

<?php
$allowedExts = array("zip", "rar"/*, "ai", "eps", "psd", "bmp", "jpg", "png", "tiff"*/);

if (@$_FILES['file'] == null) {
  echo "<span style=" . '"color: red;">' . "Please choose a 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 for max file size breach
//OR NOT: stop it on JS side to prevent long file upload 
//and then alerting user that their file is too big! 
//(Also prevents sidestepping ugly PHP error kickout if file is too 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 successfully uploaded</span>";
        } else {
            echo "<span style=" . '"color: red;">' . "Upload error! Please contact the site administrator and report the issue</span>";
        }
      } else {
      if(move_uploaded_file($fileTmpLoc, "upload/$fileName")) {
          echo "<span style=" . '"color: green;">' . "Artwork successfully uploaded</span>";
        } else {
            echo "<span style=" . '"color: red;">' . "Upload error! Please contact the site administrator and report the issue</span>";
        }
      }
    }
} else {
  error_reporting(E_ERROR ^ E_PARSE);
  echo "<span style=" . '"color: red;">' . "Upload stopped! Did you 'zip' your file?</span>";
}

?>

2 个答案:

答案 0 :(得分：0)

对于要分配给它的javascript变量，您应该能够在echo之后$basefile =变量。

这可能有所帮助：

How to pass variables and data from PHP to JavaScript?

答案 1 :(得分：0)

在我看来，使用ajax，并更好地分离关注点。让PHP处理updload并返回一些已发生的数据。让javasctipt使用返回的数据执行ajax请求并在请求完成时根据需要更新DOM。让CSS处理样式。如果要更改消息容器的样式，是否真的想要更改javascript和PHP？

我的PHP有点生疏，我通常使用jQuery进行ajax，所以下面可能需要一些“按摩”才能做到正确但它应该让你上路。

<强> PHP 

<?php
$allowedExts = array("zip", "rar");

if (@$_FILES['file'] == null) {
  $dataOut["success"] = false;
  $dataOut["message"] = 'Please choose a 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 for fucking max file size breach
//OR NOT: stop it on JS side to prevent long file upload 
//and then alerting user that their file is too big! 
//(Also prevents sidestepping ugly PHP error kickout if file is too 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 successfully uploaded";
        } else {
            $dataOut["success"] = false;
            $dataOut["message"] = "Upload error! Please contact the site administrator and report the issue";
        }
      } else {
      if(move_uploaded_file($fileTmpLoc, "upload/$fileName")) {
          $dataOut["success"] = true;
          $dataOut["message"] = "Artwork successfully uploaded";
        } else {
          $dataOut["success"] = false;
          $dataOut["message"] = "Upload error! Please contact the site administrator and report the issue";
        }
      }
    }
} else {
  error_reporting(E_ERROR ^ E_PARSE);
  $dataOut["success"] = false;
  $dataOut["message"] = "Upload stopped! Did you 'zip' your file?";
}

echo json_encode($dataOut);

?>


<script>
	  function _(el) {
	    return 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 a 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 is too big! Max upload size is 50MB. To upload a bigger file, please contact us for instructions");
            setStatus(false,"File is too big! Max upload size is 50MB");
			exit();
		  }
		} else {
          setStatus(false, "Upload stopped! Did you 'zip' your 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 try again");
	  }
	</script>
.info {color:#000;}
.error {color:#F00;}
.success {color:#0F0;}
<input id="artwork_filename" type="hidden" name="custom" value="" />

您可以进行其他改进，但这应该是一个很好的起点。

相关问题
最新问题