JQuery做出图片上传预览与删除步骤详解

来源：动视网责编：小采时间：2020-11-27 19:51:47

JQuery做出图片上传预览与删除步骤详解

JQuery做出图片上传预览与删除步骤详解:这次给大家带来JQuery做出图片上传预览与删除步骤详解，JQuery做出图片上传预览与删除的注意事项有哪些，下面就是实战案例，一起来看一下。1. preview.2.0.html<!DOCTYPE html> <html> <head> <title>

推荐度：

点击下载本文 文档为doc格式

导读JQuery做出图片上传预览与删除步骤详解:这次给大家带来JQuery做出图片上传预览与删除步骤详解，JQuery做出图片上传预览与删除的注意事项有哪些，下面就是实战案例，一起来看一下。1. preview.2.0.html<!DOCTYPE html> <html> <head> <title>

这次给大家带来JQuery做出图片上传预览与删除步骤详解，JQuery做出图片上传预览与删除的注意事项有哪些，下面就是实战案例，一起来看一下。

1. preview.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. srdz.preview.2.0.css

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

3. srdz.preview.2.0.js

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='dft'>" +
 "<a class='btn-pic btn-pic-bg' href='javascript:void(0);'>" +
 "<span>上传图片</span>" +
 "<input id='" + fileid + "' type='file' name='file' class='ipt-bg' />" +
 "</a>" +
 "</p>" +
 "<p id='" + xdelid + "' class='drt'>" +
 "<a class='btn-pic btn-pic-bg' href='javascript:void(0)'>" +
 "<span>删除图片</span>" +
 "<input type='button' id='" + delid + "' class='ipt-bg'/>" +
 "</a>" +
 "</p>" +
 "</p>" +
 "<p id='" + viewid + "'></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 ' + ver + ']><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='spanc'>请选择正确的图片（jpg、jpeg、png）!</span>");
 return;
 }
 
 if(browser.isIE(6)){
 HanderOther($this);
 }else if(browser.isIE(7) || browser.isIE(8) || browser.isIE(9)){
 HanderIE7($this);
 }else if(window.FileReader){
 HanderFileReader($this);
 }else{
 $("#" + viewid).html("<span class='spanc'>该浏览器不支持预览图片!</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='"+oFREvent.target.result+"' style='width:100%;height:100%;'/>");
 $("#" + xdelid).show();
 };
 
 var aFiles = $this.get(0).files;
 if (aFiles.length == 0) { return; }
 if (!rFilter.test(aFiles[0].type)) { 
 $("#" + viewid).html("<span class='spanc'>请选择正确的图片（jpg、jpeg、png）!</span>"); 
 return; 
 }
 oFReader.readAsDataURL(aFiles[0]);
 }
 
 function HanderIE7($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='"+$this.val()+"' style='width:100%;height:100%;'/>");
 $("#" + 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 ' + ver + ']><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();
 }
 });
};

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

JQuery做出图片上传预览与删除步骤详解

推荐度：

点击下载本文 文档为doc格式

标签：实现图片删除图片上传

热门焦点

JQuery做出图片上传预览与删除步骤详解

JQuery做出图片上传预览与删除步骤详解

JQuery做出图片上传预览与删除步骤详解

最新推荐

猜你喜欢

热门推荐