首页 教程 php教程 教程详情

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

小编:简简单单 发布日期:2017-05-30

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码

HTML代码:

 

 代码如下

  

多图上传

<script type="text/javascript"src="jquery.min.js"></script>

<script type="text/javascript"src="plupload.full.min.js"></script>

 

 

     

 

<script type="text/javascript">

varuploader =newplupload.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{

      varli ='';

      plupload.each(files,function(file) {//遍历文件

        li  +="

  • 上传中 0%
  • ";

          });

          $("#ul_pics").append(li);

          uploader.start();

        }

      },

      UploadProgress:function(up, file) {//上传中,显示进度条

      varpercent = file.percent;

        $("#"+ file.id).find('.bar').css({"width": percent +"%"});

        $("#"+ file.id).find(".percent").text("上传中 "+percent +"%");

      },

      FileUploaded:function(up, file, info) {//文件上传成功的时候触发

        vardata = eval("("+ info.response +")");

        $("#"+  file.id).html("x");

      },

      Error:function(up, err) {//上传出错的时候触发

        alert("error");

      }

     }

    });

    uploader.init();

      

    functiondelimg(o){

      varsrc = $(o).prev().attr("src"); 

      $.post("upimgs.php?get=delimg&imgurl="+src,function(data){   

        if(data==1){

          $(o).parent().remove();

        }

      }) 

    }

    </script>

     

    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)) { 

         echojson_encode(array("error"=>"您还未选择图片")); 

         exit; 

       } 

       $type=strtolower(substr(strrchr($name,'.'), 1));//获取文件类型 

          

       if(!in_array($type,$typeArr)) { 

         echojson_encode(array("error"=>"清上传jpg,png或gif类型的图片!")); 

         exit; 

       } 

       if($size> (1024 * 1024 * 10)) { 

         echojson_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)) {//临时文件转移到目标文件夹 

         echojson_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name)); 

       }else{ 

         echojson_encode(array("error"=>"上传有误,清检查服务器配置!")); 

       } 

      }

      if($_GET['get']=="delimg"){

        $imgsrc=$_GET['imgurl'];

        unlink($imgsrc);

        echo1;

      }

    }

     

    相关文章

    推荐游戏

    • 街机弹珠台
      街机弹珠台
      益智休闲
      79.6 MB
      《街机弹珠台》又是一款弹珠游戏,这款游戏的画面将更加炫丽,它集合了多种弹珠游戏,和各种经典...
      点击下载
    • 无限少女
      无限少女
      角色扮演
      42.5 MB
      《无限少女》是一款日系的二次元同人卡牌手游。游戏界面美轮美奂,玩法模式设计新颖,玩家可以见...
      点击下载
    • 永远的7日之都
      永远的7日之都
      角色扮演
      938.7 MB
      《永远的7日之都》是一款网易制作与发行的日系动作RPG手游,有着庞大的故事观,诸多拥有不同实力...
      点击下载
    • 寒灵之剑
      寒灵之剑
      回合网游
      131.8 MB
      《寒灵之剑》是2014年首款真3D的回合制手游,此款游戏汲取经典回合制游戏精髓,复原了回合制游戏...
      点击下载