Maison interface Web js tutoriel Comment prévisualiser et télécharger des images et afficher des vignettes avec ajax

Comment prévisualiser et télécharger des images et afficher des vignettes avec ajax

Apr 03, 2018 pm 03:08 PM
ajax 图片 预览

Cette fois, je vais vous montrer comment utiliser ajax pour prévisualiser et télécharger des images et afficher les vignettes Quelles sont les précautions pour qu'Ajax implémente l'aperçu des images et télécharge et affiche les vignettes, comme suit : Il s’agit d’un cas pratique, jetons-y un coup d’œil.

Pour implémenter la fonction, vous pouvez prévisualiser l'image lors du téléchargement. Comme il y a d'autres mots, vous ne téléchargez pas simplement l'image, mais vous l'enregistrez avec d'autres mots. Bien sûr, téléchargez d'abord l'image. puis ajoutez le chemin avec d'autres mots. Écrivez-les ensemble dans la base de données ; générez des vignettes pour les images en même temps. Maintenant, nous écrivons uniquement la méthode de téléchargement des images. Transmettez simplement les paramètres de texte directement en ajax. plusieurs images, modifiez-les simplement.

Je me suis inspiré d'informations en ligne et je l'ai écrit moi-même. Il n'est pas nécessaire d'ajouter une nouvelle page, une seule page suffit.

Code JS :

//ajax保存数据,后台方法里实现此方法 
function SaveData() {  
    filename = document.getElementById("idFile").value; 
    result =test_test_aspx.SaveData(filename).value; 
    if (result) { 
      alert("保存成功!");      
    } 
    return false; 
  }  
//实现预览功能 
  function DrawImage(ImgD) { 
    var preW = 118; 
    var preH = 118; 
    var image = new Image(); 
    image.src = ImgD.src; 
    if (image.width > 0 && image.height > 0) { 
      flag = true; 
      if (image.width / image.height >= preW/ preH) { 
        if (image.width > preW) { 
          ImgD.width = preW; 
          ImgD.height = (image.height * preW) / image.width; 
        } 
        else { 
          ImgD.width = image.width; 
          ImgD.height = image.height; 
        } 
        ImgD.alt = image.width + "x" + image.height; 
      } 
      else { 
        if (image.height > preH) { 
          ImgD.height = preH; 
          ImgD.width = (image.width * preH) / image.height; 
        } 
        else { 
          ImgD.width = image.width; 
          ImgD.height = image.height; 
        } 
        ImgD.alt = image.width + "x" + image.height; 
      } 
    } 
  } 
//当idFile内容改变时 
  function FileChange(Value) { 
    flag = false; 
    document.getElementById("showImg").style.display = "none";    
    document.getElementById("idImg").width = 10; 
    document.getElementById("idImg").height = 10; 
    document.getElementById("idImg").alt = ""; 
    document.getElementById("idImg").src = Value; 
  }
Copier après la connexion

Ce qui suit est le code frontal :

<p class="cbs"> 
<p class="l"><label>图片:</label></p> 
<p> 
  <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" /> 
</p> 
    </p>  
    <p class="cbs"> 
<p class="l"><label>预览:</label></p> 
<p> 
  <img id="idImg" height="0" width="0" src="" alt="" onload="DrawImage(this);" /> //实现预览 
  <img id="showImg" width="118" height="118" alt="" runat="server" style="display:none"/>  //加这个主要是为了实现查看时显示图片,因为上面的(idImg)加上runat="server" 报错,如有好的方法可以留言     
</p> 
</p>
Copier après la connexion

Voici la méthode AJAX :

[Ajax.AjaxMethod()] 
public bool SaveData(string fileNamePath) 
{ 
  string serverFileName = ""; 
  string sThumbFile = "";   
  string sSavePath = "~/Files/"; 
  int intThumbWidth = 118; 
  int intThumbHeight = 118; 
  string sThumbExtension = "thumb_"; 
  try 
  { 
 //获取要保存的文件信息 
 FileInfo file = new FileInfo(fileNamePath); 
 //获得文件扩展名 
 string fileNameExt = file.Extension; 
 
 //验证合法的文件 
 if (CheckFileExt(fileNameExt)) 
 { 
   //生成将要保存的随机文件名 
   string fileName = GetFileName() + fileNameExt; 
   //检查保存的路径 是否有/结尾 
   if (sSavePath.EndsWith("/") == false) sSavePath = sSavePath + "/"; 
 
   //按日期归类保存 
   string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/"; 
   if (true) 
   { 
 sSavePath += datePath; 
   } 
   //获得要保存的文件路径 
   serverFileName = sSavePath + fileName; 
   //物理完整路径 
   string toFileFullPath = HttpContext.Current.Server.MapPath(sSavePath); 
 
   //检查是否有该路径 没有就创建 
   if (!Directory.Exists(toFileFullPath)) 
   { 
 Directory.CreateDirectory(toFileFullPath); 
   } 
 
   //将要保存的完整文件名  
   string toFile = toFileFullPath + fileName; 
 
   ///创建WebClient实例 
   WebClient myWebClient = new WebClient(); 
   //设定windows网络安全认证  
   myWebClient.Credentials = CredentialCache.DefaultCredentials; 
   
   //要上传的文件 
   FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); 
   //FileStream fs = OpenFile(); 
   BinaryReader r = new BinaryReader(fs); 
   //使用UploadFile方法可以用下面的格式 
   //myWebClient.UploadFile(toFile, "PUT",fileNamePath); 
   byte[] postArray = r.ReadBytes((int)fs.Length); 
   Stream postStream = myWebClient.OpenWrite(toFile, "PUT"); 
   if (postStream.CanWrite) 
   { 
 postStream.Write(postArray, 0, postArray.Length); 
   } 
   postStream.Close(); 
   //以上为原图 
   try 
   { 
 //原图加载  
  using (System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(serverFileName))) 
 { 
   //原图宽度和高度  
   int width = sourceImage.Width; 
   int height = sourceImage.Height; 
   int smallWidth; 
   int smallHeight; 
 
   //获取第一张绘制图的大小,(比较 原图的宽/缩略图的宽 和 原图的高/缩略图的高)  
   if (((decimal)width) / height <= ((decimal)intThumbWidth) / intThumbHeight) 
   { 
  smallWidth = intThumbWidth; 
  smallHeight = intThumbWidth * height / width; 
   } 
   else 
   { 
  smallWidth = intThumbHeight * width / height; 
  smallHeight = intThumbHeight; 
   } 
 
   //判断缩略图在当前文件夹下是否同名称文件存在  
  int file_append = 0; 
   sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + fileNameExt; 
 
   while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sThumbFile))) 
   { 
  file_append++; 
  sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + 
file_append.ToString() + fileNameExt; 
   } 
   //缩略图保存的绝对路径  
   string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile; 
 
   //新建一个图板,以最小等比例压缩大小绘制原图  
   using (System.Drawing.Image bitmap = new System.Drawing.Bitmap(smallWidth, smallHeight)) 
   { 
  //绘制中间图  
  using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap)) 
  { 
//高清,平滑  
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; 
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 
g.Clear(Color.Black); 
g.DrawImage( 
sourceImage, 
new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight), 
new System.Drawing.Rectangle(0, 0, width, height), 
System.Drawing.GraphicsUnit.Pixel 
); 
  } 
  //新建一个图板,以缩略图大小绘制中间图  
  using (System.Drawing.Image bitmap1 = new System.Drawing.Bitmap(intThumbWidth, intThumbHeight)) 
  { 
//绘制缩略图  
using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap1)) 
{   
//高清,平滑  
  g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; 
  g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 
  g.Clear(Color.Black); 
  int lwidth = (smallWidth - intThumbWidth) / 2; 
  int bheight = (smallHeight - intThumbHeight) / 2; 
  g.DrawImage(bitmap, new Rectangle(0, 0, intThumbWidth, intThumbHeight), lwidth, bheight, intThumbWidth,intThumbHeight, GraphicsUnit.Pixel); 
  g.Dispose(); 
  bitmap1.Save(smallImagePath, System.Drawing.Imaging.ImageFormat.Jpeg); 
   return true; 
   } 
  } 
   } 
 } 
   } 
   catch 
   { 
 //出错则删除  
 System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(serverFileName)); 
 return false; 
   } 
 } 
 else 
 { 
   return false; 
 } 
  } 
  catch (Exception e) 
  { 
 return false; 
  } 
} 
/// <summary> 
/// 检查是否为合法的上传文件 
/// </summary> 
/// <param name="_fileExt"></param> 
/// <returns></returns> 
private bool CheckFileExt(string _fileExt) 
{ 
  string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" }; 
  for (int i = 0; i < allowExt.Length; i++) 
  { 
 if (allowExt[i] == _fileExt) { return true; } 
  } 
  return false; 
 
} 
   //生成随机数文件名 
public static string GetFileName() 
{ 
  Random rd = new Random(); 
  StringBuilder serial = new StringBuilder(); 
  serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff")); 
  serial.Append(rd.Next(0, 999999).ToString()); 
  return serial.ToString(); 
 
}
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site php chinois !

Lecture recommandée :

Comment ajax soumet-il un formulaire et implémente le téléchargement de fichiers

Ajax transmet les données au format json au arrière-plan. Comment gérer les erreurs

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!

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 résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? Où est l'image enregistrée automatiquement lors de la publication ? Comment résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? Où est l'image enregistrée automatiquement lors de la publication ? Mar 22, 2024 am 08:06 AM

Avec le développement continu des médias sociaux, Xiaohongshu est devenue une plateforme permettant à de plus en plus de jeunes de partager leur vie et de découvrir de belles choses. De nombreux utilisateurs sont gênés par des problèmes de sauvegarde automatique lors de la publication d’images. Alors, comment résoudre ce problème ? 1. Comment résoudre le problème de l'enregistrement automatique des images lors de la publication sur Xiaohongshu ? 1. Vider le cache Tout d'abord, nous pouvons essayer de vider les données du cache de Xiaohongshu. Les étapes sont les suivantes : (1) Ouvrez Xiaohongshu et cliquez sur le bouton « Mon » dans le coin inférieur droit (2) Sur la page du centre personnel, recherchez « Paramètres » et cliquez dessus (3) Faites défiler vers le bas et recherchez « ; "Vider le cache". Cliquez sur OK. Après avoir vidé le cache, entrez à nouveau dans Xiaohongshu et essayez de publier des photos pour voir si le problème de sauvegarde automatique est résolu. 2. Mettez à jour la version Xiaohongshu pour vous assurer que votre Xiaohongshu

Comment publier des photos dans les commentaires TikTok ? Où se trouve l'entrée des photos dans la zone commentaire ? Comment publier des photos dans les commentaires TikTok ? Où se trouve l'entrée des photos dans la zone commentaire ? Mar 21, 2024 pm 09:12 PM

Avec la popularité des courtes vidéos Douyin, les interactions des utilisateurs dans la zone de commentaires sont devenues plus colorées. Certains utilisateurs souhaitent partager des images en commentaires pour mieux exprimer leurs opinions ou émotions. Alors, comment publier des photos dans les commentaires TikTok ? Cet article répondra à cette question en détail et vous fournira quelques conseils et précautions connexes. 1. Comment publier des photos dans les commentaires Douyin ? 1. Ouvrez Douyin : Tout d'abord, vous devez ouvrir l'application Douyin et vous connecter à votre compte. 2. Recherchez la zone de commentaire : lorsque vous parcourez ou publiez une courte vidéo, recherchez l'endroit où vous souhaitez commenter et cliquez sur le bouton "Commentaire". 3. Saisissez le contenu de votre commentaire : saisissez le contenu de votre commentaire dans la zone de commentaire. 4. Choisissez d'envoyer une photo : Dans l'interface de saisie du contenu des commentaires, vous verrez un bouton « image » ou un bouton « + », cliquez sur

6 façons de rendre les images plus nettes sur iPhone 6 façons de rendre les images plus nettes sur iPhone Mar 04, 2024 pm 06:25 PM

Les iPhones récents d'Apple capturent des souvenirs avec des détails, une saturation et une luminosité nets. Mais parfois, vous pouvez rencontrer des problèmes qui peuvent rendre l’image moins claire. Bien que la mise au point automatique sur les appareils photo iPhone ait parcouru un long chemin, vous permettant de prendre des photos rapidement, l'appareil photo peut se concentrer par erreur sur le mauvais sujet dans certaines situations, rendant la photo floue dans les zones indésirables. Si vos photos sur votre iPhone semblent floues ou manquent globalement de netteté, l’article suivant devrait vous aider à les rendre plus nettes. Comment rendre les images plus claires sur iPhone [6 méthodes] Vous pouvez essayer d'utiliser l'application Photos native pour nettoyer vos photos. Si vous souhaitez plus de fonctionnalités et d'options

Comment faire sortir les images ppt une par une Comment faire sortir les images ppt une par une Mar 25, 2024 pm 04:00 PM

Dans PowerPoint, il est courant d'afficher les images une par une, ce qui peut être réalisé en définissant des effets d'animation. Ce guide détaille les étapes de mise en œuvre de cette technique, y compris la configuration de base, l'insertion d'images, l'ajout d'une animation et l'ajustement de l'ordre et du timing de l'animation. De plus, des paramètres et ajustements avancés sont fournis, tels que l'utilisation de déclencheurs, l'ajustement de la vitesse et de l'ordre de l'animation et la prévisualisation des effets d'animation. En suivant ces étapes et conseils, les utilisateurs peuvent facilement configurer les images pour qu'elles apparaissent les unes après les autres dans PowerPoint, améliorant ainsi l'impact visuel de la présentation et attirant l'attention du public.

Comment convertir des documents PDF en images jpg avec Foxit PDF Reader - Comment convertir des documents PDF en images jpg avec Foxit PDF Reader Comment convertir des documents PDF en images jpg avec Foxit PDF Reader - Comment convertir des documents PDF en images jpg avec Foxit PDF Reader Mar 04, 2024 pm 05:49 PM

Utilisez-vous également le logiciel Foxit PDF Reader ? Alors, savez-vous comment Foxit PDF Reader convertit les documents PDF en images jpg ? L'article suivant vous explique comment Foxit PDF Reader convertit les documents PDF en images jpg ? images jpg, venez jeter un oeil ci-dessous. Démarrez d'abord Foxit PDF Reader, puis recherchez « Fonctionnalités » dans la barre d'outils supérieure, puis sélectionnez la fonction « PDF vers autres ». Ensuite, ouvrez une page Web intitulée « Foxit PDF Online Conversion ». Cliquez sur le bouton « Connexion » en haut à droite de la page pour vous connecter, puis activez la fonction « PDF to Image ». Cliquez ensuite sur le bouton de téléchargement et ajoutez le fichier pdf que vous souhaitez convertir en image. Après l'avoir ajouté, cliquez sur "Démarrer la conversion".

Comment disposer deux images côte à côte dans un document wps Comment disposer deux images côte à côte dans un document wps Mar 20, 2024 pm 04:00 PM

Lors de l'utilisation du logiciel bureautique WPS, nous avons constaté que non seulement un formulaire est utilisé, mais que des tableaux et des images peuvent être ajoutés au texte, des images peuvent également être ajoutées au tableau, etc. Ceux-ci sont tous utilisés ensemble pour créer le contenu de l'ensemble du document. paraître plus riche, si vous devez insérer deux images dans le document et qu’elles doivent être disposées côte à côte. Notre prochain cours résoudra ce problème : comment placer deux images côte à côte dans un document wps. 1. Tout d'abord, vous devez ouvrir le logiciel WPS et trouver l'image que vous souhaitez ajuster. Faites un clic gauche sur l'image et une barre de menu apparaîtra, sélectionnez "Mise en page". 2. Sélectionnez « Emballage serré » dans l'habillage du texte. 3. Une fois que toutes les images dont vous avez besoin ont été confirmées comme étant définies sur « Habillage de texte serré », vous pouvez faire glisser les images vers la position appropriée et cliquer sur la première image.

Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions Mar 15, 2024 am 10:30 AM

Certains internautes ont constaté que lorsqu'ils ouvraient la page Web du navigateur, les images de la page Web ne pouvaient pas être chargées pendant une longue période. Que s'est-il passé ? J'ai vérifié que le réseau est normal, alors quel est le problème ? L'éditeur ci-dessous vous présentera six solutions au problème de l'impossibilité de charger les images de pages Web. Les images de la page Web ne peuvent pas être chargées : 1. Problème de vitesse Internet La page Web ne peut pas afficher les images. Cela peut être dû au fait que la vitesse Internet de l'ordinateur est relativement lente et qu'il y a davantage de logiciels ouverts sur l'ordinateur et que les images auxquelles nous accédons sont relativement volumineuses. peut être dû à un délai de chargement. Par conséquent, l'image ne peut pas être affichée. Vous pouvez désactiver le logiciel qui utilise la vitesse du réseau et le vérifier dans le gestionnaire de tâches. 2. Trop de visiteurs Si la page Web ne peut pas afficher d'images, c'est peut-être parce que les pages Web que nous avons visitées ont été visitées en même temps.

Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Feb 20, 2024 am 10:07 AM

Titre : Méthodes et exemples de code pour résoudre les erreurs 403 dans les requêtes jQuery AJAX L'erreur 403 fait référence à une demande selon laquelle le serveur interdit l'accès à une ressource. Cette erreur se produit généralement parce que la demande manque d'autorisations ou est rejetée par le serveur. Lorsque vous effectuez des requêtes jQueryAJAX, vous rencontrez parfois cette situation. Cet article explique comment résoudre ce problème et fournit des exemples de code. Solution : Vérifiez les autorisations : assurez-vous d'abord que l'adresse URL demandée est correcte et vérifiez que vous disposez des autorisations suffisantes pour accéder à la ressource.

See all articles