PHP + plupload.js实现多图上传并显示进度条加删除实例代码


Posted in PHP onMarch 06, 2017

PHP + plupload.js 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)" rel="external nofollow" 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; 
  } 
}

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

PHP 相关文章推荐
完美解决dedecms中的[html][/html]和[code][/code]问题
Mar 20 PHP
php开发留言板的CRUD(增,删,改,查)操作
Apr 19 PHP
PHP获取用户的浏览器与操作系统信息的代码
Sep 04 PHP
zend framework配置操作数据库实例分析
Dec 06 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
Nov 11 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
Nov 18 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
Aug 17 PHP
微信支付PHP SDK之微信公众号支付代码详解
Dec 09 PHP
PHP保存session到memcache服务器的方法
Jan 19 PHP
CI框架整合smarty步骤详解
May 19 PHP
PHP多进程编程总结(推荐)
Jul 18 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
Jun 05 PHP
PHP实现添加购物车功能
Mar 06 #PHP
PHP自动补全表单的两种方法
Mar 06 #PHP
PHP中for循环与foreach的区别
Mar 06 #PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
Mar 05 #PHP
php实现留言板功能
Mar 05 #PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
Mar 04 #PHP
php获取网站根目录物理路径的几种方法(推荐)
Mar 04 #PHP
You might like
php编程每天必学之表单验证
2016/03/01 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python中int与str互转方法
2018/07/02 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
浅谈django orm 优化
2018/08/18 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
英语自我评价范文
2014/01/24 职场文书
室内设计专业自荐信
2014/05/31 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
见义勇为事迹材料
2014/12/24 职场文书
高中班长竞选稿
2015/11/20 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python