我希望允许用户动态上传图像并以某种合理的视图显示它们。我不挑剔它的外观,只是它的功能。我偶然发现了 YoxView 并一直在尝试使用它。我按照这里的安装:http: //www.yoxigen.com/yoxview/usage.aspx#installation
但是,我似乎无法让它正常工作。图像不是动态上传的,一旦刷新页面,它们就会显示缩略图,但是,缩略图是上传图像的大小,而不是我告诉他们调整大小的大小。(我的缩略图正在文件夹中创建unit_images/thumbnails
。
此外,YoxView 的 CSS 没有显示出来。
这是图像在页面上显示的位置unit_edit.php
<div class="editunitimages">
<form id="imageform" method="post" enctype="multipart/form-data" action='upload.php?id=<?php print $_GET['id']; ?>' >
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
<div id="unit_images">
<?php
require_once('config/db.php');
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$query = "SELECT id, image FROM images WHERE unit = ".$_GET['id']."";
$result = mysqli_query($con, $query);
echo '<div class="yoxview">';
$i = 1;
while ($row = mysqli_fetch_assoc($result))
{
echo '<a href="unit_images/'.$row['image'].'"><img src="unit_images/thumbnails/'.$row['image'].'" alt="'.$i.'" title="image '.$i.'" /></a>';
$i++;
}
echo '</div>';
?>
</div>
</div> <!-- end editunitimages -->
我在页面上也有一个样式
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<style>
.preview{width:200px;border:solid 1px #dedede;padding:10px;}
#preview{color:#cc0000;font-size:12px}
</style>
这是我在同一页面上的 JS
在这里,我收到一个控制台错误,上面写着 Uncaught Reference Error: options is not defined
<script>
$(document).ready(function()
{
$("#thumbnails").yoxview([options]);
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
这是我的upload.php
文件
我注意到print_r('here');
页面上也没有显示。我认为这就是为什么我的图像缩略图没有被调整大小(它们与上传大小保持不变)
<?php
function resize_image($file, $w, $h, $crop=FALSE) {
list($width, $height) = getimagesize($file);
$r = $width / $height;
if ($crop) {
print_r('here');
if ($width > $height) {
$width = ceil($width-($width*abs($r-$w/$h)));
} else {
$height = ceil($height-($height*abs($r-$w/$h)));
}
$newwidth = $w;
$newheight = $h;
} else {
if ($w/$h > $r) {
$newwidth = $h*$r;
$newheight = $h;
} else {
$newheight = $w/$r;
$newwidth = $w;
}
}
$src = imagecreatefromjpeg($file);
$dst = imagecreatetruecolor($newwidth, $newheight);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
return $dst;
}
require_once('config/db.php');
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$query = "SELECT MAX(id) AS id FROM images";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_assoc($result))
{ $image_id = $row['id']; $image_id++; }
$path = "unit_images/";
$valid_formats = array("jpg", "jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = strtolower($_FILES['photoimg']['name']);
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<((1024*1024)*5))
{
$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$actual_image_name = $image_id.'_'.$actual_image_name;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$file = $path.$actual_image_name;
$thumb = $path.'/thumbnails/'.$actual_image_name;
if (!copy($file, $thumb)) { echo 'Failed to copy.'; }
resize_image($thumb, 60, 40);
$query = "INSERT INTO images(unit, image) VALUES(".$_GET['id'].",'".$actual_image_name."')";
mysqli_query($con,$query);
//echo "<img src='unit_images/".$thumb."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>