ThinkPHP 上传图片，并显示缩略图
<html>
<head></head>
<body>
<form action="upload" method="post" enctype="multipart/form-data" >
<div class="am-form-group am-form-file">
<label for="doc-ipt-pwd-2" class="am-u-sm-2 am-text-sm am-text-right">缩略图地址</label>
<div class="am-u-sm-6 ">
<input type="text" id="ImgURL" name="ImgURL" placeholder="缩略图地址" class="am-input-sm" >
<div class="spe-alert"></div>
</div>
<div class="am-u-sm-2 am-u-end">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 浏览</button>
<input id="doc-form-file" type="file" name="photo" onchange="PreviewImage(this)" multiple>
</div>
<div class="am-u-sm-1 am-text-danger am-vertical-align-middle">*</div>
</div>
<div class="am-form-group">
<div id="imgPreview" class="am-u-sm-4 am-u-sm-centered am-u-end">
<img id="img1" src="" alt="" width="200" height="200"/><!-- 显示缩略图 -->
</div>
</div>
</from>
<script type="text/javascript">
//===【浏览文件上传地址写入文本框】开始
$(function() {
$("#doc-form-file").on("change", function() {
var fileNames = "";
$.each(this.files, function() {
fileNames += this.name ;
});
$("#ImgURL").val(fileNames);
});
});
//===【浏览文件上传地址写入文本框】结束
//缩略图显示方法
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!=".jpg")&&(filextension!=".gif")&&(filextension!=".jpeg")&&(filextension!=".png")&&(filextension!=".bmp"))
{
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",sizingMethod="scale",src="" + path + "")";//使用滤镜效果
}
else//FF
{
path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
//path = imgFile.files[0].getAsDataURL();// FF 3.0
document.getElementById("imgPreview").innerHTML = "<img id="img1" width="200px" height="200px" src=""+path+""/>";
//document.getElementById("img1").src = path;
}
}
}
</script>
</body>
</html>//XXXController.class.php 上传图片方法
public function upload()
{
//I("post.ImgURL","","htmlspecialchars")为获取页面文本框内的值
if(I("post.ImgURL","","htmlspecialchars")!=""){
$uploads="Uploads";//保存路径
$upload = new ThinkUpload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array("jpg", "gif", "png", "jpeg");// 设置附件上传类型
$upload->rootPath = "./".$uploads."/"; // 设置附件上传根目录
$upload->subName = array("date","Ym");
// 上传单个文件
$info = $upload->uploadOne($_FILES["photo"]);
if(!$info) {
// 上传错误提示错误信息
$this->error($upload->getError());
}
else
{
//上传成功提示成功信息
$this->success("上传成功");
}
}
else
{
$this->error("请选择上传文件");
}
}声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： getimagesize获取图片尺寸实例
- 下一篇： thinkphp——滑动验证码
