ThinkPHP 上传图片，并显示缩略图

最新推荐文章于 2021-04-02 04:29:34 发布

悦祎

最新推荐文章于 2021-04-02 04:29:34 发布

阅读量5.2k

点赞数

分类专栏：【ThinkPHP3.2.3】

本文链接：https://blog.csdn.net/hdxyzlh_0225/article/details/51850949

版权

【ThinkPHP3.2.3】专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<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" οnchange='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 \Think\Upload();// 实例化上传类
		$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('请选择上传文件');
	}	
}