简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > développement back-end > tutoriel php > le corps du texte

PHP+Ajax implémente le téléchargement d'images sans actualisation avec barre de progression

墨辰丷
Libérer： 2023-03-28 06:14:01
original
1454 Les gens l'ont consulté

Cet article présente principalement l'exemple de téléchargement d'images PHP+Ajax sans actualisation et avec barre de progression, et organise en détail le code de téléchargement d'images PHP sans actualisation et avec barre de progression. Si vous en avez besoin, vous pouvez en apprendre davantage.

Exigences du projet : 1. Téléchargement d'images PHP+Ajax avec barre de progression sans actualisation, 2. Avec barre de progression. Plugins requis : jquery.js, jquery.form.js.

Je travaille actuellement sur un projet Web mobile, qui nécessite la fonction de téléchargement Ajax. Le projet nécessite PHP pour télécharger des images sans actualisation et avec une barre de progression. Laissez-moi parler de ma méthode d'implémentation et voir d'abord l'effet. .Figure

Cet exemple doit utiliser jquery.js, jquery.form.js, qui sont inclus dans la démo. Vous pouvez les télécharger en bas de. l'article.

La première étape consiste à créer l'index de la page front-end.html

Ce paragraphe est le contenu de l'affichage front-end. Ce qu'il faut expliquer ici, c'est que l'entrée : file L'étiquette n'a pas l'air très jolie, alors je la cache. Et utilisez une balise a .uploadbtn pour appeler l'événement click de la balise de fichier pour ouvrir et sélectionner le fichier.

Remarque : lors du téléchargement de fichiers, l'attribut de formulaire enctype doit être défini sur : multipart/form-data

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php-ajax无刷新上传(带进度条)demo</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
<script type=&#39;text/javascript&#39; src=&#39;js/jquery-2.0.3.min.js&#39;></script>
<script type=&#39;text/javascript&#39; src=&#39;js/jquery.form.js&#39;></script>
<link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"/>
</head>
<body>
<p style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
 <form id=&#39;myupload&#39; action=&#39;upload.php&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;>
 <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
 </form>
 <p class="imglist"> </p>
 <p class="res"></p>
 <p class="progress">
 <p class="progress-bar progress-bar-striped"><span class="percent">50%</span></p>
 </p>
 <a href="javascript:void(0);" rel="external nofollow" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
</p>
</body>
</html>
Copier après la connexion

La deuxième étape, la partie soumission Ajax

Cette partie est la partie soumission d'Ajax Le processus est le suivant :

  • À. au début de la soumission, passer avantEnvoyer La fonction de rappel définit la barre de progression à afficher La largeur de la barre de progression est de 0% et la valeur de progression est de 0%

  • Pendant le téléchargement; processus, les données renvoyées en temps réel par la fonction de rappel uploadProgress modifient la largeur de la barre de progression et la valeur de progression.

  • Une fois le téléchargement réussi, les informations sur les données téléchargées (nom de l'image, taille, adresse, etc.) sont affichées via la fonction de rappel de réussite et l'image est affichée sur la page pour un aperçu. .

  • Bien sûr, en cas d'échec, il existe une fonction de rappel d'erreur pour vous aider à ajuster la hauteur. 

<script type="text/javascript">
$(document).ready(function(e) {
 var progress = $(".progress"); 
 var progress_bar = $(".progress-bar");
 var percent = $(&#39;.percent&#39;);
 $("#uploadphoto").change(function(){
 $("#myupload").ajaxSubmit({ 
 dataType: &#39;json&#39;, //数据格式为json 
 beforeSend: function() { //开始上传 
 progress.show();
 var percentVal = &#39;0%&#39;;
 progress_bar.width(percentVal);
 percent.html(percentVal);
 }, 
 uploadProgress: function(event, position, total, percentComplete) { 
 var percentVal = percentComplete + &#39;%&#39;; //获得进度 
 progress_bar.width(percentVal); //上传进度条宽度变宽 
 percent.html(percentVal); //显示上传进度百分比 
 }, 
 success: function(data) {
 
 if(data.status == 1){
 var src = data.url; 
 var attstr= &#39;<img src="&#39;+src+&#39;">&#39;; 
 $(".imglist").append(attstr);
 $(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url);
 }else{
 $(".res").html(data.content);
 }
 progress.hide(); 
 }, 
 error:function(xhr){ //上传失败 
 alert("上传失败"); 
 progress.hide(); 
 } 
 }); 
 });
 
});
</script>
Copier après la connexion

La troisième étape, le code PHP back-end upload.php

Le code de traitement back-end est le téléchargement de fichiers PHP, mais certains jugements doivent être faits lors du téléchargement, tels que le format de fichier, la taille du fichier, etc.

Remarque : Le format de retour ajax ci-dessus est json, donc le code json de l'image doit être correctement standardisé, sinon un message vous indiquera que le téléchargement a échoué. 

$picname = $_FILES[&#39;uploadfile&#39;][&#39;name&#39;]; 
 $picsize = $_FILES[&#39;uploadfile&#39;][&#39;size&#39;]; 
 if ($picname != "") { 
 if ($picsize > 2014000) { //限制上传大小 
 echo &#39;{"status":0,"content":"图片大小不能超过2M"}&#39;;
 exit; 
 } 
 $type = strstr($picname, &#39;.&#39;); //限制上传格式 
 if ($type != ".gif" && $type != ".jpg" && $type != "png") {
 echo &#39;{"status":2,"content":"图片格式不对！"}&#39;;
 exit; 
 }
 $rand = rand(100, 999); 
 $pics = uniqid() . $type; //命名图片名称 
 //上传路径 
 $pic_path = "images/". $pics; 
 move_uploaded_file($_FILES[&#39;uploadfile&#39;][&#39;tmp_name&#39;], $pic_path); 
 } 
 $size = round($picsize/1024,2); //转换成kb 
 echo &#39;{"status":1,"name":"&#39;.$picname.&#39;","url":"&#39;.$pic_path.&#39;","size":"&#39;.$size.&#39;","content":"上传成功"}&#39;;
Copier après la connexion

Téléchargement de la démo : php-ajax-upload_jb51.rar

Ce qui précède est l'intégralité du contenu de cet article, J'espère que cela sera utile à tout le monde. L'apprentissage aide.


Recommandations associées :

Téléchargement PHP à distance ImagesExplication détaillée de la façon d'enregistrer sur un emplacement local

Comment implémenter le traitement du code phpImages

vux uploader ImagesComposant de téléchargement tutoriel d'utilisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
php php+ajax 图片
source：php.cn
Article précédent：Comment obtenir le sexe et la date de naissance d'une carte d'identité en php Article suivant：Comment utiliser curl pour envoyer des requêtes en PHP
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
Derniers articles par auteur
Derniers numéros
Les tableaux PHP obtenus à partir des paramètres d'URL ne se comportent pas comme prévu J'ai un paramètre d'URL qui contient l'identifiant de la catégorie et je souhaite le trait...
Depuis 2024-04-06 22:09:02
0
1
1428
Où dois-je placer la directive CustomLog dans Apache J'utilise php:7.2-apachedocker. Je dois désactiver le journal d'accès à la connexion à l'U...
Depuis 2024-04-06 22:03:59
0
1
990
Quel est le format des variables dans la valeur de retour ? Je suis un nouvel apprenant de php. J'ai trouvé un morceau de code : if($x<time()){retu...
Depuis 2024-04-06 21:55:20
0
1
778
Problèmes rencontrés lors de l'utilisation d'opentbs pour générer des fichiers odt : les valeurs d'une même clé sont affichées dans la même ligne au lieu de colonnes séparées. J'utilise une bibliothèque appelée OpenTbs pour créer odt en utilisant PHP, je l'utilise c...
Depuis 2024-04-06 20:18:18
0
1
483
Regrouper les résultats MySQL par ID pour effectuer une boucle J'ai une table avec des données de vol dans MySQL. J'écris un code php qui regroupera et a...
Depuis 2024-04-06 17:27:56
0
1
406
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！