我想让用户动态上传图片并以某种合理的视角显示它们。我不挑剔它的外观,只是它的功能。我偶然发现了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;
}
?>
答案 0 :(得分:0)
不知道这是否可以帮到你,但这对我有用。我创建了一个缩略图版本和我正在上传的图像的更大版本,然后将它们移动到各自的目录
if(isset($_POST)) {
$twidth = "100"; // Maximum Width For Thumbnail Images
$theight = "75"; // Maximum Height For Thumbnail Images
$lwidth = "500"; // Maximum Width For Thumbnail Images
$lheight = "375"; // Maximum Height For Thumbnail Images
$picture = $_FILES['imagefile']['name']; // Set $url To Equal The Filename For Later Use
if ($_FILES['imagefile']['type'] == "image/jpg" || $_FILES['imagefile']['type'] == "image/jpeg" || $_FILES['imagefile']['type'] == "image/pjpeg") {
$imagename = $_FILES['imagefile']['name'];
$source = $_FILES['imagefile']['tmp_name'];
$target = "/www/mvc/public/uploads/".$imagename;
if(move_uploaded_file($source, $target)) {
$imagepath = $imagename;
$save = "/www/mvc/public/images/content/" . $imagename; //This is the new file you saving
$file = "/www/mvc/public/uploads/" . $imagepath; //This is the original file
$image = imagecreatefromjpeg($file) ;
$currwidth = imagesx($image); // Current Image Width
$currheight = imagesy($image); // Current Image Height
if ($currheight > $currwidth) { // If Height Is Greater Than Width
$zoom = $lwidth / $currheight; // Length Ratio For Width
$newheight = $lheight; // Height Is Equal To Max Height
$newwidth = $currwidth * $zoom; // Creates The New Width
} else { // Otherwise, Assume Width Is Greater Than Height (Will Produce Same Result If Width Is Equal To Height)
$zoom = $lwidth / $currwidth; // Length Ratio For Height
$newwidth = $lwidth; // Width Is Equal To Max Width
$newheight = $currheight * $zoom; // Creates The New Height
}
$tn = imagecreatetruecolor($newwidth, $newheight) ;
imagecopyresampled($tn, $image, 0, 0, 0, 0, $newwidth, $newheight, $currwidth, $currheight) ;
imagejpeg($tn, $save, 100) ;
imagedestroy($image);
unlink($target);
//echo '<p style="margin: 0 auto;"><img id="previmg" src="/admin/resized/'.$imagename.'" alt="'.$imagename.'" title="'.$imagename.'" /></p>';
}
else {
echo "Error moving file!";
}
}
}