我想在文件上传按钮所在的同一页面上显示上传的图像/文档的缩略图。请帮助我,我是一个业余编码员,谢谢。
这很有帮助。
define ("MAX_SIZE","4000");
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
$errors=0;
$image =$_FILES["upload_field_name"]["name"];
$uploadedfile = $_FILES['upload_field_name']['tmp_name'];
if ($image)
{
$filename = stripslashes($_FILES['upload_field_name']['name']);
$extension = getExtension($filename);
$extension = strtolower($extension);
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif"))
{
echo"<script>alert('Unknown Image extension');</script>";
die;
$errors=1;
}
else
{
$size=filesize($_FILES['upload_field_name']['tmp_name']);
if ($size > MAX_SIZE*1024)
{
echo"<script>alert('You have exceeded the size limit!');</script>";
die;
$errors=1;
}
if($extension=="jpg" || $extension=="jpeg" )
{
$uploadedfile = $_FILES['upload_field_name']['tmp_name'];
$src = imagecreatefromjpeg($uploadedfile);
}
else if($extension=="png")
{
$uploadedfile = $_FILES['upload_field_name']['tmp_name'];
$src = imagecreatefrompng($uploadedfile);
}
else
{
$src = imagecreatefromgif($uploadedfile);
}
list($width,$height)=getimagesize($uploadedfile);
$newwidth=60;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);
$newwidth1=30;
$newheight1=($height/$width)*$newwidth1;
$tmp1=imagecreatetruecolor($newwidth1,$newheight1);
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
imagecopyresampled($tmp1,$src,0,0,0,0,$newwidth1,$newheight1,$width,$height);
$obj = mysql_fetch_object(mysql_query("SELECT MAX(id) as kk FROM your_table_name"));
$i = $obj->kk;
$i = $i+1;
$newname = 'dp'.$i.'.jpg';
rename($_FILES['upload_field_name']['name'], $newname);
$filename = "folder_name/".$newname;
$filename1 = "folder_name/small".$newname;
imagejpeg($tmp,$filename,100);
imagejpeg($tmp1,$filename1,100);
imagedestroy($src);
imagedestroy($tmp);
imagedestroy($tmp1);
}}
祝你玩得愉快
首先,你必须明白,对于PDF、Word文档、MP3、视频等文档,没有缩略图这样的东西。这意味着你必须自己创建这些缩略图。
其次,要为任何上传的图像创建缩略图,您需要显式地创建相同图像的缩放缩略图版本。否则,将上传的文件移动到服务器只是将原始文件:按原样移动,而不调整其大小。
如果你没有使用任何框架或你没有访问图像处理库在你的代码库,你可能想检查:WideImage。要通过Composer将WideImage包含在项目中,请尝试此链接。这将帮助您调整上载文件的大小。还有其他的;你可能只需要自己做一点研究....
最后;如果你想要一个即时反馈(上传文档的缩略图显示),你可能不得不求助于AJAX。这具有执行异步操作的优势,这意味着:你可以上传文档,一旦上传完成;缩略图立即出现在您的页面上。
如果你不太了解AJAX,那么你可能需要访问这个AJAX教程网站
jQUERY代码:
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />
CSS样式:
<style>
#imagePreview {
width: 180px;
height: 180px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
jQuery
<script type="text/javascript">
$(function() {
$("#uploadFile").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
</script>
上面的jQuery工作在onChange事件的文件上传字段和添加图像的背景给div。
HTML:<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />
用于预览缩略图的图像div的CSS:CSS
<style>
#imagePreview {
width: 180px;
height: 180px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
: