JS插件plupload.js实现多图上传并显示进度条


Posted in Javascript onNovember 29, 2016

本文实例为大家分享了plupload.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)" 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; 
  } 
}

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

Javascript 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
纯javascript版日历控件
Nov 24 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
js断点调试经验分享
Dec 08 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 #Javascript
jquery结合html实现中英文页面切换
Nov 29 #Javascript
基于Three.js插件制作360度全景图
Nov 29 #Javascript
jquery购物车结算功能实现方法
Oct 29 #Javascript
JavaScript微信定位功能实现方法
Nov 29 #Javascript
jQuery中的select操作详解
Nov 29 #Javascript
微信小程序加载更多 点击查看更多
Nov 29 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP时间戳使用实例代码
2008/06/07 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php实现的二分查找算法示例
2017/06/20 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python里运用私有属性和方法总结
2019/07/08 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
活动总结书
2014/05/08 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
就业协议书
2014/09/12 职场文书
迁户口计划生育证明
2014/10/19 职场文书
四年级学生期末评语
2014/12/26 职场文书
考博导师推荐信范文
2015/03/27 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript