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 相关文章推荐
别了 JavaScript中的isXX系列
Aug 01 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
vue实现数字滚动效果
Jun 29 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
JS实现放大镜效果
Sep 21 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
JavaScript ES6的函数拓展
Jan 18 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
我的论坛源代码(九)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
详解如何使用webpack打包JS
2018/06/21 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
从0开始的Python学习016异常
2019/04/08 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python图片的横坐标汉字实例
2019/12/04 Python
pytorch 求网络模型参数实例
2019/12/30 Python
销售主管岗位职责范本
2014/02/14 职场文书
40岁生日感言
2014/02/15 职场文书
导游词之神仙居景区
2019/11/15 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android