【发布时间】:2015-01-21 00:04:58
【问题描述】:
我将其作为一个学习练习,我仍然是 PHP 的初学者。我对javascript的了解更少:
我正在编写的脚本应该允许用户从他们的硬盘上传图像,允许用户通过页面上的一些控件对其进行修改,然后显示修改后的图像。
目前,我只使用 PHP 来执行此操作,它需要用户设置控件的参数,然后发布它们(需要重新加载完整的页面)。有人可以为我指出一个更好的方法吗?有没有类似的东西我可以看看?
如果我最终能够在用户滑动控件时实时更新图像,那就太好了。我在寻找 JavaScript 吗? AJAX?
这是我的代码的基本版本:
<?php session_start(); ?>
<html>
<head>
<script>
<?php
if(isset($_POST['upload_submit'])) { // PROCESS UPLOAD FORM//////////////////////////////////////////////////////
$tmp_file = $_FILES['file_upload']['tmp_name'];
$filename = basename($_FILES['file_upload']['name']);
$_SESSION['file_name'] = $filename; // load filename into SESSION so that it survives page reloads from POST
move_uploaded_file($tmp_file, $filename);
}
if(isset($_POST['process_submit'])){ // PROCESS CONTROL FORM//////////////////////////////////////////////////////
$im = imagecreatefromjpeg($_SESSION['file_name']);
imagefilter($im, IMG_FILTER_COLORIZE, $_POST['colred'], $_POST['colgreen'], $_POST['colblue'], $_POST['colalpha']);
imagejpeg($im, "newimage.jpg"); //output to file
imagedestroy($im); // free memory
$_SESSION['Modified'] = TRUE; // flag that the image has been modified so that the page will display newimage.jpg instead of original
}
?>
</script>
</head>
<body>
<?php
if(isset($_SESSION['Modified'])){ // Image has been modified at least once (display modified image. do not display upload form)
echo("<img src='newimage.jpg' width='400px'><br />");
}elseif(isset($_FILES['file_upload']['name'])) { // Image has been uploaded but not yet modified (do not display upload form)
echo("<img src=$filename . ' 'width=400px'><br />");
} else { // FIRST State that the form is in when the page is loaded. (No image uploaded so display upload form)
echo("<form action='index.php' enctype='multipart/form-data' method='POST'>
<input type='file' name='file_upload' />
<input type='submit' name='upload_submit' value='Upload' />
</form>");
}
echo("<form action='index.php' method='post'><br />"); // display form with 4 slider controls (Red, Green, Blue, Alpha) and a submit button
echo("<table>");
echo (isset($_POST['colred'])) ? "<tr><td>Red:</td><td> 0<input type='range' name='colred' min='0' max='255' value=" . $_POST['colred'] . ">255</td></tr>"
:"<tr><td>Red:</td><td> 0<input type='range' name='colred' min='0' max='255'>255</td></tr>";
echo (isset($_POST['colgreen'])) ? "<tr><td>Green:</td><td> 0<input type='range' name='colgreen' min='0' max='255' value=" . $_POST['colgreen'] . ">255</td></tr>"
: "<tr><td>Green:</td><td> 0<input type='range' name='colgreen' min='0' max='255'>255</td></tr>";
echo (isset($_POST['colblue'])) ? "<tr><td>Blue:</td><td> 0<input type='range' name='colblue' min='0' max='255' value=" . $_POST['colblue'] . ">255</td></tr>"
: "<tr><td>Blue:</td><td> 0<input type='range' name='colblue' min='0' max='255'>255</td></tr>";
echo (isset($_POST['colalpha'])) ? "<tr><td>Alpha:</td><td> 0<input type='range' name='colalpha' min='0' max='255' value=" . $_POST['colalpha'] . ">127</td></tr>"
: "<tr><td>Alpha:</td><td> 0<input type='range' name='colalpha' min='0' max='255' value='127'>255</td></tr>";
echo("</table>");
echo("<button name='process_submit'>Process</button>");
echo("</form>");
?>
</body>
</html>
【问题讨论】:
-
尝试使用 javascript 加载图像。您甚至可以进行预加载!
-
PHP 只会在页面加载到浏览器之前运行一次。之后,你可以用 php 做的就是请求一个新页面(或者用 ajax 请求一个页面)。在任何情况下,您都想使用 javascript 进行原位页面处理。
标签: php html image post reload