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 相关文章推荐
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
可输入的下拉框
2006/06/19 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
VSCode配置react开发环境的步骤
2017/12/27 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
安装dbus-python的简要教程
2015/05/05 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python实现把数字转换成中文
2015/06/29 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python实现基于POS算法的区块链
2018/08/07 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
后勤岗位职责
2013/11/26 职场文书
自荐信的基本格式
2014/02/22 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
霸气队列口号
2014/06/18 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python 实现定积分与二重定积分的操作
2021/05/26 Python