Maison php教程 php手册 php+js实现图片的上传、裁剪、预览、提交示例

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

Jun 06, 2016 pm 08:27 PM
图片上传 图片裁剪

首先用到的语言是php、插件imgareaselect附下载地址,没有太多花哨的样式,喜欢的朋友可以学习下

首先用到的语言是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+js实现图片的上传、裁剪、预览、提交示例


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment implémenter la fonction de recadrage d'image en JavaScript ? Comment implémenter la fonction de recadrage d'image en JavaScript ? Oct 18, 2023 am 09:54 AM

Comment implémenter la fonction de recadrage d'image en JavaScript ? Avec le développement rapide de l’Internet mobile, les fonctions de recadrage d’images sont devenues de plus en plus courantes sur de nombreux sites Web et applications mobiles. En tant que langage de développement frontal, JavaScript fournit de nombreuses bibliothèques et technologies pour implémenter des fonctions de recadrage d'images. Cet article explique comment utiliser JavaScript pour implémenter la fonction de recadrage d'image et fournit des exemples de code spécifiques. 1. Conception de la structure HTML Tout d'abord, nous devons créer un conteneur dans la page pour afficher les images et les zones de recadrage

Comment utiliser vue et Element-plus pour implémenter des fonctions de recadrage et de rotation d'images Comment utiliser vue et Element-plus pour implémenter des fonctions de recadrage et de rotation d'images Jul 19, 2023 pm 07:04 PM

Comment utiliser Vue et ElementPlus pour implémenter des fonctions de recadrage et de rotation d'images Introduction : Comme les applications Web ont des exigences de plus en plus élevées en matière d'expérience utilisateur, le traitement d'image est devenu un élément incontournable. En tant que framework JavaScript populaire, Vue, combiné à ElementPlus, une excellente bibliothèque de composants d'interface utilisateur, nous fournit une multitude d'outils et de fonctions pour recadrer et faire pivoter des images rapidement et facilement. Cet article sera basé sur Vue et ElementPlus pour vous présenter

Exemple de démarrage de VUE3 : création d'un recadrage d'image simple Exemple de démarrage de VUE3 : création d'un recadrage d'image simple Jun 15, 2023 pm 08:45 PM

Vue.js est un framework frontal JavaScript populaire. La dernière version - Vue3 a été lancée. La nouvelle version de Vue a amélioré les performances, la taille et l'expérience de développement et est accueillie par de plus en plus de développeurs. Cet article explique comment utiliser Vue3 pour créer un recadrage d'image simple. Tout d'abord, nous devons créer un projet Vue et installer les plugins requis. Vous pouvez utiliser VueCLI pour créer un projet ou le créer manuellement. Ici, nous prenons la méthode d'utilisation de VueCLI comme exemple : #

Étapes pour implémenter le téléchargement et l'affichage d'images à l'aide du framework CakePHP Étapes pour implémenter le téléchargement et l'affichage d'images à l'aide du framework CakePHP Jul 29, 2023 pm 04:21 PM

Étapes pour implémenter le téléchargement et l'affichage d'images à l'aide du framework CakePHP Introduction : Dans les applications Web modernes, le téléchargement et l'affichage d'images sont des exigences fonctionnelles courantes. Le framework CakePHP fournit aux développeurs des fonctions puissantes et des outils pratiques, rendant simple et efficace le téléchargement et l'affichage d'images. Cet article vous expliquera comment utiliser le framework CakePHP pour télécharger et afficher des images. Étape 1 : Créer un formulaire de téléchargement de fichier. Tout d'abord, nous devons créer un formulaire dans le fichier d'affichage pour que les utilisateurs puissent télécharger des images. Ce qui suit est un exemple de

L'applet WeChat implémente la fonction de téléchargement d'images L'applet WeChat implémente la fonction de téléchargement d'images Nov 21, 2023 am 09:08 AM

L'applet WeChat implémente la fonction de téléchargement d'images Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable dans la vie des gens. Les mini-programmes WeChat fournissent non seulement une multitude de scénarios d'application, mais prennent également en charge les fonctions définies par les développeurs, notamment les fonctions de téléchargement d'images. Cet article présentera comment implémenter la fonction de téléchargement d'images dans l'applet WeChat et fournira des exemples de code spécifiques. 1. Travaux préparatoires Avant de commencer à écrire du code, nous devons télécharger et installer les outils de développement WeChat et nous inscrire en tant que développeur WeChat. En même temps, vous devez également comprendre WeChat

Comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images Comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images Sep 25, 2023 pm 03:17 PM

Comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images. Dans le développement Web moderne, la fonction de téléchargement d'images est une exigence très courante. Cet article présentera en détail comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images et fournira des exemples de code spécifiques. 1. Partie front-end (Vue) Tout d'abord, vous devez créer un formulaire pour télécharger des images sur le front-end. Le code spécifique est le suivant :<template><div><inputtype="fil

Comment implémenter la fonction de recadrage et de téléchargement d'images en JavaScript ? Comment implémenter la fonction de recadrage et de téléchargement d'images en JavaScript ? Oct 24, 2023 am 09:15 AM

Comment implémenter la fonction de recadrage et de téléchargement d'images en JavaScript ? Dans le développement Web, nous rencontrons souvent le besoin pour les utilisateurs de télécharger et de recadrer des images, comme le téléchargement d'avatars, l'édition d'images, etc. JavaScript fournit une multitude d'API et de fonctions qui peuvent nous aider à implémenter de telles fonctions. Cet article explique comment utiliser JavaScript pour implémenter des fonctions de recadrage et de téléchargement d'images, et fournit des exemples de code spécifiques. Tout d'abord, nous devons ajouter un élément pour afficher les images dans le fichier HTML, tel qu'un

Comment gérer le téléchargement et la compression d'images dans le développement de la technologie Vue Comment gérer le téléchargement et la compression d'images dans le développement de la technologie Vue Oct 08, 2023 am 10:58 AM

Comment gérer le téléchargement et la compression d'images dans le développement de la technologie Vue Dans les applications Web modernes, le téléchargement d'images est une exigence très courante. Cependant, pour des raisons de transmission réseau et de stockage, le téléchargement direct d'images originales haute résolution peut entraîner des vitesses de téléchargement lentes et un gaspillage important d'espace de stockage. Par conséquent, le téléchargement et la compression des images sont très importants. Dans le développement de la technologie Vue, nous pouvons utiliser des solutions prêtes à l'emploi pour gérer le téléchargement et la compression des images. Ce qui suit présentera comment utiliser vue-upload-comone

See all articles