IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >李蓝猫的博客 >我要发文
AJAX+PHP实现图片异步上传(附实例)
作者:李蓝猫   发布时间:2017-04-11 15:04:15   点击数:7957

在项目开发中遇到一个问题,一直以来图片上传都通过form file方式提交表单,一般需求可以满足,可是遇到高质量大图时,会出现上传因图片过大而抛出程序错误,影响用户体验,遂改变套路,采用ajax方式实时上传,解决了提交时图和数据的处理问题。

附件:ImgUpload.zip

此为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

本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter
0.0118s