ユーザーが画像を動的にアップロードして、何らかの合理的なビューで表示できるようにしたいと考えています。機能的であるというだけで、私はそれがどのように見えるかについてうるさいわけではありません. 私は 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;
}
?>