Explication détaillée des étapes de prévisualisation et de suppression du téléchargement d'images avec JQuery-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-26 11:28:25

original

3013 Les gens l'ont consulté

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>

Copier après la connexion

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;
}

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 :

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();
  }
 });
};

Copier après la connexion

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!