使用JQuery Ajax 在表单中检查图片上传

当我们提交表单时，希望对用户的输入进行即刻检查，而不是等到最终提交之时，AJAX异步请求是常见的处理手段。

这里以一个图片上传为例，说明这一个过程。

HTML部分：

		<form enctype="multipart/form-data" id="sky_upform"  action="" method="post">
			<input id="fileUpload" type="file" name="upfile" value="上传照片" accept="image/*"/>
		</form>
		
		<span id="img_count_info">已上传0张照片</span></div>
		<img id="ShopImage" src="{$info.r_coverImg|default:themes/images/shop_ld.jpg}" width="104" height="82" />

JS部分:

（1）引入JQuery FROM库

          <script  type="text/javascript" src="./js/jquery.form.js"></script>

（2）文件输入框变化时（选择了文件），触发事件change中调用ajaxSubmit

<span style="white-space:pre">	</span><pre name="code" class="html">		<script type="text/javascript">
		$("#fileUpload").change(function() {
			var messtxt;
	 
			$("#sky_upform").ajaxSubmit({
				type: 'post',
				dataType: "json",
				url: "Ask.php?id=2",
				beforeSubmit: function() {
					//上传过程中显示进度条动画
					document.getElementById("ShopImage").src = "images/loadding2.gif";
				},
				success: function(data) {
					if (data['ret'] == "-1") {
						messtxt = "文件超过规定大小(最大不超过1M)！";
						alert(messtxt);
						document.getElementById("ShopImage").src = '';
					} else if (data['ret'] == "-2") {
						messtxt = "文件类型不符(支持jpg/jpeg/bmp/gif格式)!"; 
						alert(messtxt);
						document.getElementById("ShopImage").src = '';
					} else if (data['ret'] == "-3") {
						messtxt = "移动文件出错!";
						alert(messtxt);
						document.getElementById("ShopImage").src = '';
					} else if (data['ret'] == "-4"){
						messtxt = "未知错误!";
						alert(messtxt);
						document.getElementById("ShopImage").src = '';
					}
					else
					{
						//上传到服务器上后图片的文件名
						messtxt = data['file_dir'];
						var rimage = "../../images/corporation/" + messtxt;
						document.getElementById("ShopImage").src = rimage;
						document.getElementById("img_count_info").innerHTML = "已上传" + data['ret'] + "张照片";    
					}    
				},
				resetForm: false,
				clearForm: false
			});        
		});
		</script>	 

ajaxSubmit的参数是一个关系型数组
{    
  target:        '#output1',   // target element(s) to be updated with server response    
  beforeSubmit:  showRequest,  // pre-submit callback    
  success:       showResponse  // post-submit callback    
 
  // other available options:    
  //url:       url         // override for form's 'action' attribute    
  //type:      type        // 'get' or 'post', override for form's 'method' attribute    
  //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)    
  //clearForm: true        // clear all form fields after successful submit    
  //resetForm: true        // reset the form after successful submit    
 
  // $.ajax options can be used here too, for example:    
  //timeout:   3000    
  };   
  
后台PHP部分：

服务器侧PHP响应文件Ask.php

                if($_GET['id'] == 2)
		{
			//上传照片ajax请求
			
			//照片存放路径
			$arrParam = array("ImgSaveDir" => $_SERVER['DOCUMENT_ROOT']."/images/corporation/".$_SESSION['user_id']."/");  
			//等待上传完成并检查格式、重命名、移动到指定位置		
			$ret = AjaxUploadImg($arrParam);
			if(($ret != "-1") && ($ret != "-2") && ($ret != "-3") && ($ret != "-4"))
			{
				//记录已上传的数量
				$_SESSION['shop_image_count']++;
				$data['ret'] = $_SESSION['shop_image_count'];
				//图片在服务器上的相对位置
				$data['file_dir'] = $_SESSION['user_id']."/".$ret;    
			}
			else
			{
				$data['ret'] = $ret;
			}
			echo json_encode($data); 
			exit;
		}
	
		function AjaxUploadImg($dir) 
		{	
			//"upfile"要与HTML中input(file)控件的name属性值一致
			//is_uploaded_file() 函数判断指定的文件是否是通过 HTTP POST 上传的。
			//该函数可以用于确保恶意的用户无法欺骗脚本去访问本不能访问的文件，例如 /etc/passwd。
			if(is_uploaded_file($_FILES['upfile']['tmp_name'])) 
			{
				//定义支持的上传格式
				$photo_types = array(
								'image/jpg',
								'image/jpeg',
								'image/png',
								'image/pjpeg',
								'image/gif',
								'image/bmp',
								'image/x-png'
				); 
				
				//上传照片大小限制
				$max_size = 2048000;
				
				//用户文件夹所在的路径，存放原则是在用户文件夹下新建一个以日期命名的子文件夹	
				$path = $dir['ImgSaveDir'];
				$photo_folder = date("Y") . date("m") . date("d") . "/";
				
				//检查目录是否存在														
				if(! file_exists($path . $photo_folder)) { 
					mkdir($path . $photo_folder, 0777, true); // mkdir("temp/sub, 0777, true);
				}
				$upfile = $_FILES['upfile'];
				$name = $upfile['name'];
				$type = $upfile['type'];
				$size = $upfile['size'];
				$tmp_name = $upfile['tmp_name'];
				
				//检查文件大小
				if($max_size < $size) { 
					return "-1"; 
				}
				//检查文件类型
				if(! in_array($type, $photo_types)) { 
					return "-2"; 
				}


				//文件最终路径
				$pinfo = pathinfo($name);
				$photo_type = $pinfo['extension']; 
				$times = time();				
				$file_url = $path . $photo_folder . $times . "." . $photo_type; 


				//移动文件
				if(! move_uploaded_file($tmp_name, $file_url)) {
					return "-3"; 
				}


				return $file_url;
			}
			else 
			{
				return "-4";
			}
		}