Maison > Article > interface Web > Explication détaillée des étapes de prévisualisation et de suppression du téléchargement d'images avec JQuery

Explication détaillée des étapes de prévisualisation et de suppression du téléchargement d'images avec JQuery

php中世界最好的语言original: 2018-04-26 11:28:252971parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes de téléchargement, de prévisualisation et de suppression d'images avec JQuery. Quelles sont les précautions pour télécharger, prévisualiser et supprimer des images avec JQuery. Voici un cas pratique. , jetons un coup d'oeil.

1. aperçu.2.0.html

<!DOCTYPE html>
<html>
<head>
 <title>上传图片预览</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="srdz.preview.2.0.css">
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="srdz.preview.2.0.js"></script>
<script type="text/javascript">
 $(function(){
  var p = new ImgPreview();
  p.preview({previewid:"imgupload1"}); 
  p.preview({previewid:"imgupload2"}); 
 });
</script>
</head>
<body>
 <p align="center" style="width: 50%;padding: 50px 300px;" id="imgupload1"></p>
 <p align="center" style="width: 50%;padding: 50px 300px;" id="imgupload2"></p>
</body>
</html>

2. 🎜>3. srdz.preview.2.0.js

.btn-pic {
 display: block;
 position: relative;
 width: 120px;
 height: 40px;
 overflow: hidden;
 cursor: pointer;
 text-align: center;
}
 
.btn-pic-bg {
 border: 1px solid #ff9000;
 background: none repeat scroll 0 0 #ff9000;
 color: #ffffff;
 text-decoration: none;
}
 
.btn-pic span {
 display: block;
 line-height: 39px;
}
 
.ipt-bg {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 120px;
 height: 40px;
 font-size: 100px;
 opacity: 0;
 filter: alpha(opacity=0);
}
 
.spanc{
 color: red;
}
 
.drt {
 float: right;
 display: none;
}
 
.dft {
 float: left;
}

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 :

function ImgPreview(){}
 
ImgPreview.prototype.preview=function(options){
  
 var time = new Date().getTime();
 var fileid = "file" + time;
 var xdelid = "xdel" + time;
 var delid = "del" + time; 
 var viewid = "view" + time;
  
 var htm = "" +
 "<p>" +
  "<p class=&#39;dft&#39;>" +
   "<a class=&#39;btn-pic btn-pic-bg&#39; href=&#39;javascript:void(0);&#39;>" +
    "<span>上传图片</span>" +
    "<input id=&#39;" + fileid + "&#39; type=&#39;file&#39; name=&#39;file&#39; class=&#39;ipt-bg&#39; />" +
   "</a>" +
  "</p>" +
  "<p id=&#39;" + xdelid + "&#39; class=&#39;drt&#39;>" +
   "<a class=&#39;btn-pic btn-pic-bg&#39; href=&#39;javascript:void(0)&#39;>" +
    "<span>删除图片</span>" +
    "<input type=&#39;button&#39; id=&#39;" + delid + "&#39; class=&#39;ipt-bg&#39;/>" +
   "</a>" +
  "</p>" +
 "</p>" +
 "<p id=&#39;" + viewid + "&#39;></p>";
  
 $("#" + options.previewid).html(htm);
  
 $("#" + fileid).bind("click",function(){
   
  var $this =$(this);
   
  var browser={
   isIE:function(ver){
    var b = document.createElement('b');
    b.innerHTML = '<!--[if IE &#39; + ver + &#39;]><i></i><![endif]-->';
    return b.getElementsByTagName('i').length === 1;
   }
  };
   
  $this.change(function(){
   var regex=/(.*)\.(jpg|jpeg|png)$/;
   var val = $this.val();
   if(!regex.test(val)){
    $("#" + viewid).html("<span class=&#39;spanc&#39;>请选择正确的图片（jpg、jpeg、png）!</span>");
    return;
   }
    
   if(browser.isIE(6)){
    HanderOther($this);
   }else if(browser.isIE(7) || browser.isIE(8) || browser.isIE(9)){
    HanderIE789($this);
   }else if(window.FileReader){
    HanderFileReader($this);
   }else{
    $("#" + viewid).html("<span class=&#39;spanc&#39;>该浏览器不支持预览图片!</span>");
   }
    
   function HanderFileReader($this){
    var oFReader = new window.FileReader(),
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    oFReader.onload = function (oFREvent){
     $("#" + viewid).html("<img src=&#39;"+oFREvent.target.result+"&#39; style=&#39;width:100%;height:100%;&#39;/>");
     $("#" + xdelid).show();
    };
  
    var aFiles = $this.get(0).files;
    if (aFiles.length == 0) { return; }
    if (!rFilter.test(aFiles[0].type)) { 
     $("#" + viewid).html("<span class=&#39;spanc&#39;>请选择正确的图片（jpg、jpeg、png）!</span>"); 
     return; 
    }
    oFReader.readAsDataURL(aFiles[0]);
   }
  
   function HanderIE789($this){
    if(options.width != null && parseInt(options.width) > 0){
     $("#" + viewid).css("width",options.width + "px");
    }else{
     $("#" + viewid).css("width","378px");
    }
    if(options.height != null && parseInt(options.height) > 0){
     $("#" + viewid).css("height",options.height + "px");
    }else{
     $("#" + viewid).css("height","358px");
    }
    $("#" + viewid).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+GetImgSrc($this)+"')");
    $("#" + xdelid).show();
   }
  
   function HanderOther($this){
    $("#" + viewid).html("<img src=&#39;"+$this.val()+"&#39; style=&#39;width:100%;height:100%;&#39;/>");
    $("#" + xdelid).show();
   }
  
   function GetImgSrc($this){
    $this.select();
    $this.blur();
    var imgSrc =document.selection.createRange().text;
    document.selection.empty();
    return imgSrc;
   }
    
    
  });
 });//绑定按钮事件
  
 $("#" + delid).bind("click",function(){
  var browser={
    isIE:function(ver){
     var b = document.createElement('b');
     b.innerHTML = '<!--[if IE &#39; + ver + &#39;]><i></i><![endif]-->';
     return b.getElementsByTagName('i').length === 1;
    }
   };
   
  if(browser.isIE(7) || browser.isIE(8) || browser.isIE(9)){
   $("#" + fileid).val('');
   $("#" + viewid).css("filter","");
   $("#" + viewid).css("width","");
   $("#" + viewid).css("height","");
   $("#" + xdelid).hide();
  }else{
   $("#" + fileid).val('');
   $("#" + viewid).empty();
   $("#" + xdelid).hide();
  }
 });
};

Uploadify implémente l'affichage de la barre de progression pour télécharger des images

Comment gérer les caractères chinois tronqués lors de la transmission d'une URL jquery.ajax

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：

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

Article précédent：Implémentez jquery pour prévisualiser les images localement avant de les téléchargerArticle suivant：Implémentez jquery pour prévisualiser les images localement avant de les télécharger

Articles Liés

Voir plus