PHP + plupload.js如何实现多图上传并显示进度条加删除_程序开发

PHP + plupload.js如何实现多图上传并显示进度条加删除

创始人

2024-12-09 00:40:51

0次

HTML代码：

 
 
 
 
 
多图上传 
 
 
 
 
 
*{ margin:0px; padding:0px; font-family:Microsoft Yahei; box-sizing:border-box; -webkit-box-sizing:border-box;} 
.demo{max-width:640px; margin:0 auto; min-width:320px;} 
.ul_pics{ float:left;} 
.ul_pics li{float:left; margin:0px; padding:0px; margin-left:5px; margin-top:5px; position:relative; list-style-type:none; border:1px solid #eee; width:80px; height:80px;} 
.ul_pics li img{width:80px;height:80px;} 
.ul_pics li i{ position:absolute; top:0px; right:-1px; background:red; cursor:pointer; font-style:normal; font-size:10px; width:14px; height:14px; text-align:center; line-height:12px; color:#fff;} 
.progress{position:relative; margin-top:30px; background:#eee;}  
.bar {background-color: green; display:block; width:0%; height:15px; }  
.percent{position:absolute; height:15px; top:-18px; text-align:center; display:inline-block; left:0px; width:80px; color:#666; line-height:15px; font-size:12px; }  
.demo #btn{ width:80px; height:80px; margin-left:5px; margin-top:5px; border:1px dotted #c2c2c2; background:url(up.png) no-repeat center; background-size:30px auto; text-align:center; line-height:120px; font-size:30px; color:#666; float:left;}

"; }); $("#ul_pics").append(li); uploader.start(); } }, UploadProgress: function(up, file) { //上传中，显示进度条 var percent = file.percent; $("#" + file.id).find('.bar').css({"width": percent + "%"}); $("#" + file.id).find(".percent").text("上传中 "+percent + "%"); }, FileUploaded: function(up, file, info) { //文件上传成功的时候触发 var data = eval("(" + info.response + ")"); $("#" + file.id).html("x"); }, Error: function(up, err) { //上传出错的时候触发 alert("error"); } } }); uploader.init(); function delimg(o){ var src = $(o).prev().attr("src"); $.post("upimgs.php?get=delimg&imgurl="+src,function(data){ if(data==1){ $(o).parent().remove(); } }) }

PHP 代码：

"您还未选择图片"));  
     exit;  
   }  
   $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型  
     
   if (!in_array($type, $typeArr)) {  
     echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片！"));  
     exit;  
   }  
   if ($size > (1024 * 1024 * 10)) {  
     echo json_encode(array("error"=>"图片大小已超过10MB！"));  
     exit;  
   }  
     
   $pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称  
   $pic_url = $path . $pic_name;//上传后图片路径+名称  
   if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹  
     echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));  
   } else {  
     echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));  
   }  
  } 
  if($_GET['get']=="delimg"){ 
    $imgsrc = $_GET['imgurl']; 
    unlink($imgsrc); 
    echo 1; 
  } 
}

上一篇：mac os如何切换多个PHP版本

下一篇：PHP如何实现添加购物车功能

PHP + plupload.js如何实现多图上传并显示进度条加删除

相关内容

热门资讯