Backend-Entwicklung
PHP-Tutorial
PHP + plupload.js implementiert das Hochladen mehrerer Bilder und zeigt einen Fortschrittsbalken sowie Beispielcode für das Löschen an
PHP + plupload.js implementiert das Hochladen mehrerer Bilder und zeigt einen Fortschrittsbalken sowie Beispielcode für das Löschen an
In diesem Artikel wird hauptsächlich PHP + plupload.js vorgestellt, um mehrere Bild-Uploads zu implementieren, Fortschrittsbalken anzuzeigen und Beispielcodes zu löschen. Es hat einen gewissen Referenzwert und Interessierte können sich darüber informieren.
PHP + plupload.js JS-Plug-in implementiert das Hochladen mehrerer Bilder und zeigt Fortschrittsbalken und Löschinstanzen an. Gehen wir ohne weitere Umschweife direkt zum Code
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>
<p class="demo">
<a href="javascript:void(0)" rel="external nofollow" id="btn"></a>
<ul id="ul_pics" class="ul_pics clearfix">
</ul>
</p>
<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'] + "'><p class='progress'><span class='bar'></span><span class='percent'>上传中 0%</span></p></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-Code:
<?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;
}
} Das Obige ist der Inhalt von PHP + plupload.js, um das Hochladen mehrerer Bilder zu implementieren und den Fortschrittsbalken anzuzeigen und den Beispielcode zu löschen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www .php.cn)!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1372
52
PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.
CakePHP arbeitet mit Datenbank
Sep 10, 2024 pm 05:25 PM
Das Arbeiten mit der Datenbank in CakePHP ist sehr einfach. In diesem Kapitel werden wir die CRUD-Operationen (Erstellen, Lesen, Aktualisieren, Löschen) verstehen.
CakePHP Datum und Uhrzeit
Sep 10, 2024 pm 05:27 PM
Um in cakephp4 mit Datum und Uhrzeit zu arbeiten, verwenden wir die verfügbare FrozenTime-Klasse.
CakePHP-Datei hochladen
Sep 10, 2024 pm 05:27 PM
Um am Datei-Upload zu arbeiten, verwenden wir den Formular-Helfer. Hier ist ein Beispiel für den Datei-Upload.
CakePHP-Routing
Sep 10, 2024 pm 05:25 PM
In diesem Kapitel lernen wir die folgenden Themen im Zusammenhang mit dem Routing kennen.
Besprechen Sie CakePHP
Sep 10, 2024 pm 05:28 PM
CakePHP ist ein Open-Source-Framework für PHP. Es soll die Entwicklung, Bereitstellung und Wartung von Anwendungen erheblich vereinfachen. CakePHP basiert auf einer MVC-ähnlichen Architektur, die sowohl leistungsstark als auch leicht zu verstehen ist. Modelle, Ansichten und Controller gu
CakePHP erstellt Validatoren
Sep 10, 2024 pm 05:26 PM
Der Validator kann durch Hinzufügen der folgenden zwei Zeilen im Controller erstellt werden.
CakePHP-Protokollierung
Sep 10, 2024 pm 05:26 PM
Die Anmeldung bei CakePHP ist eine sehr einfache Aufgabe. Sie müssen nur eine Funktion verwenden. Sie können Fehler, Ausnahmen, Benutzeraktivitäten und von Benutzern durchgeführte Aktionen für jeden Hintergrundprozess wie Cronjob protokollieren. Das Protokollieren von Daten in CakePHP ist einfach. Die Funktion log() wird bereitgestellt
