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


Posted in PHP onMarch 06, 2017

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码

HTML代码:

<!DOCTYPE html> 
 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 
<title>多图上传</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="plupload.full.min.js"></script> 
</head> 
<body> 
<style type="text/css"> 
*{ 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;} 
</style> 
<div class="demo"> 
 <a href="javascript:void(0)" rel="external nofollow" id="btn"></a> 
 <ul id="ul_pics" class="ul_pics clearfix"> 
 </ul>  
</div> 
<script type="text/javascript"> 
var uploader = new plupload.Uploader({    //创建实例的构造方法 
 runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序 
 browse_button: 'btn',           // 上传按钮 
 url: "upimgs.php?get=upimg",        //远程上传地址 
 flash_swf_url: 'plupload/Moxie.swf',    //flash文件地址 
 silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址 
 filters: { 
  max_file_size: '10mb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb) 
  mime_types: [  //允许文件上传类型 
    {title: "files", extensions: "jpg,png,gif"} 
  ] 
 }, 
 multipart_params:{ },  //文件上传附加参数 
 file_data_name:"upimg", //文件上传的名称 
 multi_selection: false, //true:ctrl多文件上传, false 单文件上传 
 init: { 
  FilesAdded: function(up, files) { //文件上传前 
    if ($("#ul_pics").children("li").length > 5) { 
      alert("您上传的图片太多了!"); 
      uploader.destroy(); 
    } else { 
      var li = ''; 
      plupload.each(files, function(file) { //遍历文件 
        li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>上传中 0%</span></div></li>"; 
      }); 
      $("#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("<img src='" + this.url + "'/><i onclick='delimg(this)'>x</i><input type='hidden' name='' value='"+ this.url +"'>"); 
  }, 
  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(); 
    } 
  })  
} 
</script> 
</body> 
</html>

PHP 代码:

<?php 
$typeArr = array("jpg", "png", "gif");//允许上传文件格式  
$path = "files/";//上传路径  
 if (isset($_POST)) {  
  if($_GET['get']=="upimg"){ 
   $name = $_FILES['file']['name'];  
   $size = $_FILES['file']['size'];  
   $name_tmp = $_FILES['file']['tmp_name'];  
   if (empty($name)) {  
     echo json_encode(array("error"=>"您还未选择图片"));  
     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; 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
Mar 06 PHP
PHP设计模式之结构模式的深入解析
Jun 13 PHP
php selectradio和checkbox默认选择的实现方法详解
Jun 29 PHP
php Imagick获取图片RGB颜色值
Jul 28 PHP
php中多维数组按指定value排序的实现代码
Aug 19 PHP
33道php常见面试题及答案
Jul 06 PHP
PHP处理会话函数大总结
Aug 05 PHP
lnmp安装多版本PHP共存的方法详解
Aug 02 PHP
PHP日志LOG类定义与用法示例
Sep 06 PHP
PHP单例模式模拟Java Bean实现方法示例
Dec 07 PHP
thinkPHP+LayUI 流加载实现功能
Sep 27 PHP
php 使用 __call实现重载功能示例
Nov 18 PHP
PHP实现添加购物车功能
Mar 06 #PHP
PHP自动补全表单的两种方法
Mar 06 #PHP
PHP中for循环与foreach的区别
Mar 06 #PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
Mar 05 #PHP
php实现留言板功能
Mar 05 #PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
Mar 04 #PHP
php获取网站根目录物理路径的几种方法(推荐)
Mar 04 #PHP
You might like
77A一级收信机修理记
2021/03/02 无线电
如何删除多级目录
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
php设计模式之单例模式代码
2016/06/11 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python 如何设置守护进程
2020/10/29 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
项目专员岗位职责
2013/12/04 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
七一建党节慰问信
2015/02/14 职场文书
2015年行政部工作总结
2015/04/28 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
python 安全地删除列表元素的方法
2022/03/16 Python