js 图片上传预览,验证图片类型、大小

HTML页面

<div class="form-group">
	<label class="col-sm-2 control-label">头像</label>
	<div class="col-sm-10">
		<div style="width: 200px; height: 110px; float: left;"><input id="image" name="image" type="file" multiple value=""/></div>
		<div style="height: 110px; float: left;"><img id="img0" src="__PUBLIC__/Admin/img/add_pic.png" style="height: 100px"/></div>
		 <span style="color:#f14d4d;margin-left:20px">建议图片尺寸:宽 × 高 = 294 × 294 像素</span>
	</div>
</div>
<script type="text/javascript">
	//头像
	$("#image").change(function () {
		var file = $(this).context.files[0];
		var exts = ['jpg','jpeg','png'];
		var maxSize = 2;
		if(file!=undefined){
			var suffix = file.name.substr(file.name.lastIndexOf('.')+1); //上传文件类型
			var size = (file.size / 1024 / 1024).toFixed(2); //上传文件大小,单位M
			if($.inArray(suffix,exts)=='-1'){
				layer.msg("请上传jpg、jpeg或png格式的图片",{icon:2});
				$("input[name='image']").val("");
				return false;
			}
			if(size>maxSize){
				layer.msg("请上传2M以下的图片",{icon:2});
				$("input[name='image']").val("");
				return false;
			}
			
			var objUrl = getObjectURL(this.files[0]);
			if (objUrl) {
				$("#img0").attr("src", objUrl);
			}
		}else{
			$("#img0").attr("src", "__PUBLIC__/Admin/img/add_pic.png");
		}
	});
	
	function getObjectURL(file) {
		var url = null;
		if (window.createObjectURL != undefined) {
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) {
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) {	
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	}
</script>

PHP页面,TP3.2

if(!empty($_FILES)){
	$upload = new \Think\Upload();// 实例化上传类
	$upload->maxSize = 2097152;// 设置附件上传大小 2M
	$upload->exts = array('jpg', 'png', 'jpeg');// 设置附件上传类型
	$upload->rootPath = './Uploads/member/'; // 设置附件上传根目录
	$upload->savePath = ''; // 设置附件上传(子)目录
	$upload->saveRule = 'time';
	$info = $upload->upload();
	
	//头像
	if(isset($info['image'])){
		$data['head_img'] = '/Uploads/member/'.$info[image][savepath].$info[image][savename];
		//生成缩略图
		$thumb = new \Think\Image();
		$thumb->open($_SERVER['DOCUMENT_ROOT'].$data['head_img']);
		$thumb->thumb(294,294,\Think\Image::IMAGE_THUMB_FIXED)->save($_SERVER['DOCUMENT_ROOT'].$data['head_img']);
	}elseif(!empty($_FILES['image']['name']) && !isset($info['image'])){
		$this->ajaxReturn(['status' => 0, 'info' => $upload->getError()]);
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值