在项目开发中遇到一个问题,一直以来图片上传都通过form file方式提交表单,一般需求可以满足,可是遇到高质量大图时,会出现上传因图片过大而抛出程序错误,影响用户体验,遂改变套路,采用ajax方式实时上传,解决了提交时图和数据的处理问题。
此为html页面js调用方式
function sky_upfiles(i){ var messtxt; $("#sky_upform"+i).ajaxSubmit({ //dataType:'script', type:'post', url:"doupfiles.php", beforeSubmit:function(){ $('.mengban').show(); }, success: function(data){ // alert(data); if(data==1){ //返回参数可见ajax内容 messtxt = "上传成功!"; }else if(data==-1){ $('.mengban').hide(); alert('对不起,单张图片尺寸过大,请勿超过5m!'); }else if(data==-2){ $('.mengban').hide(); alert('对不起,文件类型不符!'); }else if(data==-3){ $('.mengban').hide(); alert('移动文件出错!'); }else{ $("input[name=sky_upfiles"+i+"]").val(data); $("#idpositivepic"+i).attr('src',"../../static/"+data); $('.mengban').hide(); } }, resetForm: false, clearForm: false }); }
图像域写法 因为此ajax需要ajaxSubmit才可触发事件,每个图像域会用一个form来包含,如多个图像域只需要改变每个form名字+参数即可
<form enctype="multipart/form-data" id="sky_upform3" name="sky_upform" action="" method="post"> <div class="thix_jr_name7"> <a href="javascript:void(0);" style="width:100%; height:60%; " class="input"> <img width="100%" id="idpositivepic3" src="images/headimg1.png" style="max-height:60%;" > <input type="file" class="idpositivepic" name="upfile" id="file" maxlength="60" size="40" value="" onchange="sky_upfiles(3)" /> </a> </div> </form>
附ajax文件doupfiles.php的写法只需调用即可
<?php require_once('Pic.class.php'); /* * 1:成功上传 *-1:文件超过规定大小 *-2:文件类型不符 *-3:移动文件出错 */ $imgtype = $_POST['imgtype']; 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=70000000; //上传照片大小限制,默认700k 现在7M if(empty($imgtype)){ $photo_folder="../../static/header_image/"; //上传照片路径 }else{ $photo_folder="../../static/{$imgtype}_images/"; //上传照片路径 } ///////////////////////////////////////////////////开始处理上传 if(!file_exists($photo_folder)){ //检查照片目录是否存在 mkdir($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']; $file = $_FILES["upfile"]; $photo_name=$file["tmp_name"]; //echo $photo_name; $photo_size = getimagesize($photo_name); if($max_size < $file["size"]){//检查文件大小 echo -1; //echo "<script>alert('对不起,图片尺寸过大,请勿超过5m!');</script>"; exit(); } if(!in_array($file["type"], $photo_types)){//检查文件类型 echo -2; // echo "<script>alert('对不起,文件类型不符!');</script>"; exit(); } if(!file_exists($photo_folder))//照片目录 mkdir($photo_folder); $pinfo=pathinfo($file["name"]); $photo_type=$pinfo['extension'];//上传文件扩展名 $photo_server_folder = $photo_folder.time().".".$photo_type;//以当前时间和7位随机数作为文件名,这里是上传的完整路径 //echo "<script>alert('".$photo_server_folder."');</script>"; $photo_server_folder1 = $photo_folder.time()."_small.".$photo_type; if(!move_uploaded_file ($photo_name, $photo_server_folder)){ echo -3; //echo "移动文件出错"; exit(); } $pinfo=pathinfo($photo_server_folder); $fname=$pinfo['basename']; //echo $photo_server_folder; //echo " 已经成功上传:".$photo_server_folder."<br />"; $t = new ThumbHandler(); $t->setSrcImg($photo_server_folder); $t->setCutType(1);//这一句就OK了 $t->setDstImg($photo_server_folder1); $t->createImg(300,300); if(getImageInfo($photo_server_folder1)=='0k'){ copy($photo_server_folder,$photo_server_folder1); } //exit(); $img_url = str_replace('../../static/','',$photo_server_folder1); if(empty($imgtype)){ $user_img = array('user_id'=>$user_id, 'img_url'=>$img_url, 'uploadtime'=>time(), ); DB::Insert('user_img', $user_img); echo $img_url; }elseif($imgtype=='uploadcode'){ $img_url1 = str_replace('../../static/','',$photo_server_folder); //$url = "http://zxing.org/w/decode?u={$INI['system']['wwwprefix']}/static/{$img_url1}"; $url = "http://api.wwei.cn/dewwei.html?data={$INI['system']['wwwprefix']}/static/{$img_url1}&apikey=20150917209794"; $res = Utility::DoGet($url); $pos = strpos($res,"weixin"); if(!empty($pos)){ $user_codeimg = array('codeimgurl'=>$img_url); if( Table::UpdateCache('user', $user_id,$user_codeimg) ) { $_SESSION['usercode'] = 'Y'; echo '@@1'; } }else{ echo '@@3'; } } } function getImageInfo($img) { //$img为图象文件绝对路径 $img_info = getimagesize($img); switch ($img_info[2]) { case 1: $imgtype = "GIF"; break; case 2: $imgtype = "JPG"; break; case 3: $imgtype = "PNG"; break; } $img_type = $imgtype."图像"; $img_size = ceil(filesize($img)/1000)."k"; //获取文件大小 $new_img_info = array ( "width"=>$img_info[0], "height"=>$img_info[1], "type"=>$img_type, "size"=>$img_size ); return $img_size; } ?>
图片处理类包:Pic.class.php
直接下载引用即可:Pic.class.zip