suchen

Heim >Web-Frontend >js-Tutorial >Das JS-Plugin plupload.js implementiert das Hochladen mehrerer Bilder und zeigt den Fortschrittsbalken an

Das JS-Plugin plupload.js implementiert das Hochladen mehrerer Bilder und zeigt den Fortschrittsbalken an

高洛峰
高洛峰Original
2016-12-03 14:51:101451Durchsuche

Das Beispiel in diesem Artikel teilt den spezifischen Code des Multi-Image-Uploads von plupload.js als Referenz. Der spezifische Inhalt lautet wie folgt:

HTML-Code: 

<!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: &#39;html5,flash,silverlight,html4&#39;, //上传插件初始化选用那种方式的优先级顺序
 browse_button: &#39;btn&#39;,           // 上传按钮
 url: "upimgs.php?get=upimg",        //远程上传地址
 flash_swf_url: &#39;plupload/Moxie.swf&#39;,    //flash文件地址
 silverlight_xap_url: &#39;plupload/Moxie.xap&#39;, //silverlight文件地址
 filters: {
  max_file_size: &#39;10mb&#39;, //最大上传文件大小（格式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 = &#39;&#39;;
      plupload.each(files, function(file) { //遍历文件
        li += "<li id=&#39;" + file[&#39;id&#39;] + "&#39;><div class=&#39;progress&#39;><span class=&#39;bar&#39;></span><span class=&#39;percent&#39;>上传中 0%</span></div></li>";
      });
      $("#ul_pics").append(li);
      uploader.start();
    }
  },
  UploadProgress: function(up, file) { //上传中，显示进度条
  var percent = file.percent;
    $("#" + file.id).find(&#39;.bar&#39;).css({"width": percent + "%"});
    $("#" + file.id).find(".percent").text("上传中 "+percent + "%");
  },
  FileUploaded: function(up, file, info) { //文件上传成功的时候触发
    var data = eval("(" + info.response + ")");
    $("#" + file.id).html("<img src=&#39;" + this.url + "&#39;/><i onclick=&#39;delimg(this)&#39;>x</i><input type=&#39;hidden&#39; name=&#39;&#39; value=&#39;"+ this.url +"&#39;>");
  },
  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-Code: 

<?php
  
$typeArr = array("jpg", "png", "gif");//允许上传文件格式 
$path = "files/";//上传路径 
 if (isset($_POST)) { 
  if($_GET[&#39;get&#39;]=="upimg"){
   $name = $_FILES[&#39;file&#39;][&#39;name&#39;]; 
   $size = $_FILES[&#39;file&#39;][&#39;size&#39;]; 
   $name_tmp = $_FILES[&#39;file&#39;][&#39;tmp_name&#39;]; 
   if (empty($name)) { 
     echo json_encode(array("error"=>"您还未选择图片")); 
     exit; 
   } 
   $type = strtolower(substr(strrchr($name, &#39;.&#39;), 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[&#39;get&#39;]=="delimg"){
    $imgsrc = $_GET[&#39;imgurl&#39;];
    unlink($imgsrc);
    echo 1;
  }
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird hilfreich sein zum Studium aller


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie Arrays geschickt, um JS-Code für die Bildumschaltung zu erstellenNächster Artikel：Verwenden Sie Arrays geschickt, um JS-Code für die Bildumschaltung zu erstellen

In Verbindung stehende Artikel

Mehr sehen