웹 프론트엔드 JS 튜토리얼 JS 플러그인 plupload.js는 다중 이미지 업로드를 구현하고 진행률 표시줄을 표시합니다.

JS 플러그인 plupload.js는 다중 이미지 업로드를 구현하고 진행률 표시줄을 표시합니다.

Dec 03, 2016 pm 02:51 PM
js

이 글의 예시는 참고용으로 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;
  }
}
로그인 후 복사

위 내용은 이 글의 전체 내용이므로 도움이 되셨으면 좋겠습니다. 모두의 공부에


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 Nov 21, 2023 am 10:00 AM

JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. 주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법

JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법 Nov 21, 2023 am 10:53 AM

JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법

JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법 JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법 Nov 21, 2023 am 11:11 AM

JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법

JS 및 Baidu Maps를 사용하여 지도 히트맵 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 히트맵 기능을 구현하는 방법 Nov 21, 2023 am 09:33 AM

JS 및 Baidu Maps를 사용하여 지도 히트맵 기능을 구현하는 방법

See all articles