Comment télécharger des images en utilisant jquery.form.js_jquery
L'exemple de cet article décrit comment utiliser jquery.form.js pour télécharger des images. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
testupfile2.php
<?php
header('Content-type:text/html;charset=utf-8');
include_once 'includes/common.inc.php';
if(!empty($_FILES['upfile'])){
//文件格式
$image=array('image/jpg',
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'image/x-png'
);
$updir=$_SERVER['DOCUMENT_ROOT'].$_config['g']['baseUrl'].'/attached/images/';
$upfile=$_FILES['upfile'];
$name=$upfile['name'];
$ext=substr($upfile['name'],strpos($upfile['name'],'.'));
$upname=md5(time().rand(1, 1000)).$ext;
$type=$upfile['type'];
$size=$upfile['size'];
$tmp_name=$upfile['tmp_name'];
$error=$upfile['error'];
$ok=0;
foreach ($image as $key=>$value) {
if($type==$value)$ok=1;
}
if($ok=='1' && $error=='0'){
move_uploaded_file($tmp_name,$updir.$upname);
//echo '<br>'.$tmp_name.'<br>'.$upname.'<br>'.$updir.'<br>'.$ext.'上传成功';
//echo '上传成功';
echo $upname;
//$im=$updir.$upname;
//echo $im;
//echo '<img src='.$updir.$upname.' />';
//$views->assign('image',$upname);
//$views->display('default/testupfile.html');
}
else echo '上传失败2';
}
else echo '上传失败1';
?>
testupfile.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.js"></script>
<script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
//jquery.form image1
$("#upimage").bind("click",function(){
if($("#upfile").val()==""){
alert("请选择一个图片文件,再点击");
return;
}
$("#form1").ajaxSubmit({
url:"testupfile2.php",
type:"POST",
//date:"upfile=upfile",
success:function(response){
alert(response);
$("#ln").empty();
$("#ln").append("<img src='<!--{$baseUrl}-->/attached/images/"+response+"' width='100' height='60'/>");
$("#im1").val(response);
},
error:function(msg){
alert("出错了");
}
});
});
//jquery.form image2
$("#upimage2").bind("click",function(){
if($("#upfile2").val()==""){
alert("请选择一个图片文件,再点击2");
return;
}
$("#form2").ajaxSubmit({
url:"testupfile2.php",
type:"POST",
//date:"upfile=upfile2",
success:function(response2){
alert(response2);
$("#ln2").empty();
$("#ln2").append("<img src='<!--{$baseUrl}-->/attached/images/"+response2+"' width='100' height='60'/>");
$("#im2").val(response2);
},
error:function(msg){
alert("出错了");
}
});
});
});
</script>
</head>
<body>
文件上传
<form enctype="multipart/form-data" id="form1" method="post" action="">
文件:
<input type="file" name="upfile" id="upfile"><input type="button" id="upimage" value="图片上传1">
<input type="text" name="im1" id="im1" value="" />
</form>
<form enctype="multipart/form-data" id="form2" method="post" action="">
文件:
<input type="file" name="upfile" id="upfile2"><input type="button" id="upimage2" value="图片上传2">
<input type="text" name="im2" id="im2" value="" />
</form>
<div id="ln">tu</div><br>
<div id="ln2">tu2</div>
</body>
</html>
Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des compétences en matière d'opération de formulaire JQuery", "Résumé de l'utilisation d'Ajax dans jquery" , "Résumé des effets et techniques de commutation jQuery", "Résumé des effets et techniques de glisser jQuery", "Résumé des techniques d'extension jQuery", "Résumé des effets spéciaux jQuery classiques courants ", "Résumé de l'utilisation de l'animation et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "plug-in commun jQuery- ins et résumé d'utilisation"
J'espère que cet article sera utile à tous ceux qui programment jQuery.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
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
É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
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
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 utiliser ThinkPHP6 pour télécharger des images
Jun 20, 2023 pm 09:25 PM
Avec le développement d’Internet, le téléchargement d’images est devenu une fonctionnalité essentielle dans le développement de sites Web et d’applications. Dans le domaine de PHP, ThinkPHP6 est devenu un framework de développement très populaire. Dans cet article, nous présenterons comment utiliser ThinkPHP6 pour implémenter le téléchargement d'images. 1. Créer un projet et un contrôleur Tout d'abord, nous devons créer un nouveau projet ThinkPHP6. Vous pouvez utiliser Composer pour l'installer ou télécharger la dernière version sur le site officiel. Une fois l'installation terminée, entrez dans la console
Comment implémenter le téléchargement et le recadrage d'images dans le développement de la technologie Vue
Oct 10, 2023 pm 12:46 PM
Comment implémenter le téléchargement et le recadrage d'images dans le développement de la technologie Vue nécessite des exemples de code spécifiques dans le développement Web moderne, le téléchargement et le recadrage d'images sont l'une des exigences courantes. En tant que framework frontal populaire, Vue.js fournit une multitude d'outils et de plug-ins pour nous aider à réaliser ces fonctions. Cet article présentera comment implémenter le téléchargement et le recadrage d'images dans le développement de la technologie Vue, et fournira des exemples de code spécifiques. La mise en œuvre du téléchargement d'images peut être divisée en deux étapes : la sélection des images et le téléchargement des images. Dans Vue, vous pouvez utiliser des plugins tiers pour simplifier cela
Comment utiliser PHP pour implémenter un système simple de téléchargement et d'affichage d'images en ligne
Sep 25, 2023 am 09:21 AM
Comment utiliser PHP pour implémenter un système simple de téléchargement et d'affichage d'images en ligne. Le système de téléchargement et d'affichage d'images est l'une des fonctions couramment utilisées des sites Web modernes. Cette fonction peut être rapidement implémentée à l'aide de PHP pendant le processus de développement. Cet article explique comment utiliser PHP pour écrire un système simple de téléchargement et d'affichage d'images en ligne, et fournit des exemples de code spécifiques. 1. Créer une base de données et des tables Tout d'abord, nous devons créer une base de données et des tables pour stocker les informations sur les images téléchargées. Utilisez l'instruction SQL suivante pour créer une table nommée "images" et définir
Problèmes de téléchargement et de recadrage d'images rencontrés dans le développement de Vue
Oct 08, 2023 pm 04:12 PM
Titre : Problèmes et solutions de téléchargement et de recadrage d'images dans le développement de Vue Introduction : Dans le développement de Vue, le téléchargement et le recadrage d'images sont des exigences courantes. Cet article présentera les problèmes de téléchargement et de recadrage d'images rencontrés dans le développement de Vue, et donnera des solutions et des exemples de code spécifiques. 1. Problème de téléchargement d'image : la sélection du bouton de téléchargement d'image ne peut pas déclencher la boîte de sélection de fichier : ce problème est généralement dû au fait que l'événement n'est pas lié correctement ou que l'événement lié ne prend pas effet. Vous pouvez lier l'événement click dans le modèle et déclencher la zone de sélection de fichier dans la méthode correspondante. Exemple de code :
