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对表单的操作代码集合
Apr 06 Javascript
javascript表单验证大全
Aug 12 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
element tree树形组件回显数据问题解决
Aug 14 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
php备份数据库类分享
2015/04/14 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
JS实现简单日历特效
2020/01/03 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python requests获取网页常用方法解析
2020/02/20 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
SQL面试题
2013/12/09 面试题
护理专科毕业推荐信
2013/11/10 职场文书
科研先进个人典型材料
2014/01/31 职场文书
《匆匆》教学反思
2014/02/22 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
python套接字socket通信
2022/04/01 Python