图片头像ajax上传并显示缩略图的方法和示例

  •   
  • 9226
  • jQuery
  • 8
  • super_dodo
  • 2014/10/30

项目开发中，需要上传用户头像或者店铺企业的Logo等操作。这些操作是网站的日常的行为。但是网上找了很多页没有合适的，虽然现在的这个也不是很满意，但是能满足上传显示灯基础功能。不过需要引入jquery等插件。

单张图片上传并显示缩略图

项目演示下载地址为 点击进入演示或者下载

直接上代码,前端部分ajax提交部分：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>单张图片上传并显示缩略图</title>
	<script src="jquery-1.8.3.js" type="text/javascript"></script>
	<script src="jquery.easyui.min.js" type="text/javascript"></script>
	<style type="text/css">
		html,body{font-family:'Microsoft Yahei';}
		h2,h3{text-align: center;}
		table{width:500px;margin:10px auto;border-collapse: collapse;}
		table tr{line-height: 50px;}
		input{width:300px;height: 30px;border-radius: 5px;}
	</style>
</head>
<body>
	<h2>单张图片上传并显示缩略图</h2>
	<h3><span style="color:red;">(图片大小不超过2m,格式为jpg,png,宽400高300为佳)</span></h3>
	<form action="" method="post" id="post_form">
		<table class="post_table" id="post_table">
			<tbody>
			<tr>
				<td width="100px">图片名称</td>
				<td width="400px"><input type="text" name="Form&#91;name&#93;" value="" class="form-control"></td>
			</tr>
			<tr>
				<td>图片展示</td>
				<td>
					<input type="text" name="Form&#91;img_logo&#93;" id="img_url" value="" readonly="readonly">
					<a href="javascript:void(0)" onclick="img_select()">选择图片</a>
					<img id="img_preview" alt="" height="100px" src="" style="display:none;">
				</td>
			</tr>
			<tr>
				<td rowspan="5">使用说明</td>
				<td rowspan="5">
				本方法主要使用ajax提交,需要用到jQuery Easy Ui里面的form的submit方法,所以在使用的时候需要引入jquery和jquery.easyui这两个js.<br>
				你在实验的时候可能会存在跨域的问题,建议post提交的地址为该域下面的地址.
				</td>
			</tr>
			</tbody>
		</table>
	</form>

	<form id="img_form" method="post" name="img_form" enctype="multipart/form-data">
		<input id="img_file" onchange="return img_upload()" name="file" type="file" style="display:none;">
	</form>

<script type="text/javascript">
	//图片上传并显示的方法
	function img_select(){ $('#img_file').click(); }
	//ajax异步提交
	function img_upload(){
		if(document.getElementById('img_file').value!=null){
			$('#img_form').form('submit', {		
				type: 'POST',
				url: "/comm/uploadImg",
				success: function(result){
					$('#img_url').val(result);		//图片上传后的地址
					$('#img_preview').css('display','block');		//显示缩略图位置
					$("#img_preview").attr("src",result);			//预览图片方法jquery的方法
				//	document.getElementById('img_preview').src = result;	//预览图片javascript的方法
				//  document.getElementById('img_url').value = result;		//图片上传后的地址
				}
			});
		}
	}
</script>		

</body>
</html>

后端PHP的接口的方法如下，仅供参考（部分）

//上传图片时的ajax方法
public function actionUploadImg(){
	$cate = Yii::app()->request->getParam('cate');		//传入分类
	//step 1 使用$_FILES['file']["error"] 检查错误
	if($_FILES["file"]["error"] > 0){
		switch($_FILES["file"]["error"]) {
			case 1: echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值<br>"; break;
			case 2: echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值"; break;
			case 3: echo "文件只有部分被上传"; break;
			case 4: echo "没有文件被上传"; break;
			default: echo "末知错误";
		}
		exit;
	}
	
	//step 2 使用$_FILES["file"]["size"] 限制大小 单位字节 2M=2000000
	$maxsize=10000000;  //10m大小
	if($_FILES["file"]["size"] > $maxsize ) { 
		echo "上传的文件太大，不能超过{$maxsize}字节";
		exit;
	}

	//step 3 使用$_FILES["file"]["type"]或是文件的扩展名 限制类型 MIME  image/gif  image/png    gif png jpg
	$allowtype=array("png", "gif", "jpg", "jpeg");
	$arr=explode(".", $_FILES["file"]["name"]);
	$hz=strtolower($arr[count($arr)-1]);
	if(!in_array($hz, $allowtype)){
		echo "这是不充许的类型";
		exit;
	}
	
	//step 4 将让传后的文件名改名
	$filepath = "upload/".date('Ymd');
	
	if(!is_dir($filepath)) { mkdir($filepath, 0777); chomd($filepath,0777);}
	$randname = date("Y").date("m").date("d").date("H").date("i").date("s").rand(1000, 9999).".".$hz;

	//将临时位置的文件移动到指定的目录上即可
	if(is_uploaded_file($_FILES["file"]["tmp_name"])){
		if(move_uploaded_file($_FILES["file"]["tmp_name"], $filepath.'/'.$randname)){
			echo '/'.$filepath.'/'.$randname;		//上传成功的节奏
		}else{
			echo "上传失败";
		}
	}else{
		echo "不是一个上传文件";
	}
}

再次温馨提示,引入两个js,两个form表单不重合,在同一个域下,ajax的post地址根据你框架的url来定。

项目演示下载地址为 点击进入演示或者下载

有人说：一生中至少要有两次冲动，一次为奋不顾身的爱情一次为说走就走的旅行，说得好像都不要钱似的。