Heim Backend-Entwicklung PHP-Tutorial php+js实现图片的上传、裁剪、预览、提交示例_PHP

php+js实现图片的上传、裁剪、预览、提交示例_PHP

Jun 01, 2016 pm 12:03 PM
图片上传 图片裁剪

首先用到的语言是php、插件imgareaselect(下载地址),没有太多花哨的样式,index.php代码如下:
复制代码 代码如下:








图片裁剪、预览


//上传图片后,把图片复制到upload文件夹下面
if($_POST){
$photo = $_FILES['img']['name'];
$tmp_addr = $_FILES['img']['tmp_name'];

$path = 'upload/';
$type=array("jpg","gif","jpeg","png");
$tool = substr(strrchr($photo,'.'),1);
if(!in_array(strtolower($tool),$type)){
$text=implode('.',$type);
echo "您只能上传以下类型文件: ",$text,"
";
}else{
$filename = explode(".",$photo); //把上传的文件名以"."好为准做一个数组。
$time = date("m-d-H-i-s"); //取当前上传的时间
$filename[0] = $time; //取文件名
$name = implode(".",$filename); //上传后的文件名
$uploadfile = $path.$name;
$_SESSION['upfile'] = $uploadfile;//上传后的文件名地址
move_uploaded_file($tmp_addr,$uploadfile);
}
// echo $uploadfile;
}
?>







if(isset($_SESSION['upfile'])){?>
php+js实现图片的上传、裁剪、预览、提交示例_PHP
}?>




php+js实现图片的上传、裁剪、预览、提交示例_PHP


Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie implementiert man die Funktion zum Zuschneiden von Bildern in JavaScript? Wie implementiert man die Funktion zum Zuschneiden von Bildern in JavaScript? Oct 18, 2023 am 09:54 AM

Wie implementiert man die Funktion zum Zuschneiden von Bildern in JavaScript? Mit der rasanten Entwicklung des mobilen Internets sind Funktionen zum Zuschneiden von Bildern in vielen Websites und mobilen Anwendungen immer häufiger anzutreffen. Als Front-End-Entwicklungssprache bietet JavaScript viele Bibliotheken und Technologien zur Implementierung von Bildbeschneidungsfunktionen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zum Zuschneiden von Bildern implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. HTML-Strukturdesign Zuerst müssen wir einen Container auf der Seite erstellen, um Bilder und Zuschneidefelder anzuzeigen

So verwenden Sie Vue und Element-Plus, um Funktionen zum Zuschneiden und Drehen von Bildern zu implementieren So verwenden Sie Vue und Element-Plus, um Funktionen zum Zuschneiden und Drehen von Bildern zu implementieren Jul 19, 2023 pm 07:04 PM

So verwenden Sie Vue und ElementPlus zum Implementieren von Funktionen zum Zuschneiden und Drehen von Bildern. Einführung: Da Webanwendungen immer höhere Anforderungen an die Benutzererfahrung stellen, ist die Bildverarbeitung zu einem Teil geworden, der nicht ignoriert werden kann. Als beliebtes JavaScript-Framework bietet uns Vue in Kombination mit ElementPlus, einer hervorragenden UI-Komponentenbibliothek, eine Fülle von Tools und Funktionen zum schnellen und einfachen Zuschneiden und Drehen von Bildern. Dieser Artikel basiert auf Vue und ElementPlus, um Ihnen eine Einführung zu geben

Das WeChat-Applet implementiert die Funktion zum Hochladen von Bildern Das WeChat-Applet implementiert die Funktion zum Hochladen von Bildern Nov 21, 2023 am 09:08 AM

WeChat-Applet implementiert Bild-Upload-Funktion Mit der Entwicklung des mobilen Internets ist das WeChat-Applet zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. WeChat-Miniprogramme bieten nicht nur eine Fülle von Anwendungsszenarien, sondern unterstützen auch vom Entwickler definierte Funktionen, einschließlich Funktionen zum Hochladen von Bildern. In diesem Artikel wird erläutert, wie die Bild-Upload-Funktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. 1. Vorbereitende Arbeiten Bevor wir mit dem Schreiben von Code beginnen, müssen wir die WeChat-Entwicklertools herunterladen und installieren und uns als WeChat-Entwickler registrieren. Gleichzeitig müssen Sie auch WeChat verstehen

VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Bildbeschneiders VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Bildbeschneiders Jun 15, 2023 pm 08:45 PM

Vue.js ist ein beliebtes JavaScript-Frontend-Framework. Die neueste Version – Vue3 – wurde veröffentlicht. Die neue Version von Vue bietet verbesserte Leistung, Größe und Entwicklungserfahrung und wird von immer mehr Entwicklern begrüßt. In diesem Artikel wird erläutert, wie Sie mit Vue3 einen einfachen Bildbeschneider erstellen. Zuerst müssen wir ein Vue-Projekt erstellen und die erforderlichen Plugins installieren. Sie können VueCLI verwenden, um ein Projekt zu erstellen, oder Sie können es manuell erstellen. Hier nehmen wir die Methode zur Verwendung von VueCLI als Beispiel: #

Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks Jul 29, 2023 pm 04:21 PM

Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks Einführung: In modernen Webanwendungen sind das Hochladen und Anzeigen von Bildern häufige Funktionsanforderungen. Das CakePHP-Framework stellt Entwicklern leistungsstarke Funktionen und praktische Tools zur Verfügung, die das Hochladen und Anzeigen von Bildern einfach und effizient machen. In diesem Artikel erfahren Sie, wie Sie das CakePHP-Framework zum Hochladen und Anzeigen von Bildern verwenden. Schritt 1: Erstellen Sie ein Datei-Upload-Formular. Zuerst müssen wir in der Ansichtsdatei ein Formular erstellen, damit Benutzer Bilder hochladen können. Das Folgende ist ein Beispiel dafür

Umgang mit dem Hochladen und Komprimieren von Bildern bei der Entwicklung der Vue-Technologie Umgang mit dem Hochladen und Komprimieren von Bildern bei der Entwicklung der Vue-Technologie Oct 08, 2023 am 10:58 AM

Umgang mit dem Hochladen und Komprimieren von Bildern bei der Entwicklung der Vue-Technologie In modernen Webanwendungen ist das Hochladen von Bildern eine sehr häufige Anforderung. Aus Gründen der Netzwerkübertragung und -speicherung kann das direkte Hochladen von Originalbildern mit hoher Auflösung jedoch zu langsamen Upload-Geschwindigkeiten und einer großen Verschwendung von Speicherplatz führen. Daher ist das Hochladen und Komprimieren von Bildern sehr wichtig. Bei der Entwicklung der Vue-Technologie können wir einige vorgefertigte Lösungen für das Hochladen und Komprimieren von Bildern verwenden. Im Folgenden wird die Verwendung von vue-upload-comone vorgestellt

Wie implementiert man die Funktion zum Zuschneiden und Hochladen von Bildern in JavaScript? Wie implementiert man die Funktion zum Zuschneiden und Hochladen von Bildern in JavaScript? Oct 24, 2023 am 09:15 AM

Wie implementiert man die Funktion zum Zuschneiden und Hochladen von Bildern in JavaScript? Bei der Webentwicklung müssen Benutzer häufig Bilder hochladen und zuschneiden, z. B. durch Hochladen von Avataren, Bildbearbeitung usw. JavaScript bietet eine Fülle von APIs und Funktionen, die uns bei der Implementierung solcher Funktionen helfen können. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript Funktionen zum Zuschneiden und Hochladen von Bildern implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir ein Element zum Anzeigen von Bildern in der HTML-Datei hinzufügen, z. B. ein

So verwenden Sie PHP und Vue, um die Funktion zum Hochladen von Bildern zu implementieren So verwenden Sie PHP und Vue, um die Funktion zum Hochladen von Bildern zu implementieren Sep 25, 2023 pm 03:17 PM

Verwendung von PHP und Vue zur Implementierung der Bild-Upload-Funktion In der modernen Webentwicklung ist die Bild-Upload-Funktion eine sehr häufige Anforderung. In diesem Artikel wird detailliert beschrieben, wie PHP und Vue zum Implementieren der Bild-Upload-Funktion verwendet werden, und es werden spezifische Codebeispiele bereitgestellt. 1. Frontend-Teil (Vue) Zuerst müssen Sie ein Formular zum Hochladen von Bildern im Frontend erstellen. Der spezifische Code lautet wie folgt:<template><div><inputtype="fil

See all articles