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判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
Validform表单验证总结篇
Oct 31 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
原生js+canvas实现下雪效果
Aug 02 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
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
微信小程序python用户认证的实现
2019/07/29 Python
Python的缺点和劣势分析
2019/11/19 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
检察官就职演讲稿
2014/01/13 职场文书
银行求职自荐信
2014/06/30 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
中秋节慰问信
2015/02/15 职场文书
公司放假通知范文
2015/04/14 职场文书
在校证明模板
2015/06/17 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript