基于JQuery實現(xiàn)圖片上傳預覽與刪除操作

更新時間：2016年05月24日 16:33:49 作者：零度以上

這篇文章主要為大家詳細介紹了基于JQuery實現(xiàn)圖片上傳預覽與刪除操作的相關代碼，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JQuery實現(xiàn)圖片上傳預覽與刪除的具體代碼，經(jīng)測試目前滿足谷歌、火狐、360、IE6,7,8,9,10,11等瀏覽器，供大家參考，具體內(nèi)容如下

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>
 <div align="center" style="width: 50%;padding: 50px 300px;" id="imgupload1"></div>
 <div align="center" style="width: 50%;padding: 50px 300px;" id="imgupload2"></div>
</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 = "" +
 "<div>" +
  "<div 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>" +
  "</div>" +
  "<div 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>" +
  "</div>" +
 "</div>" +
 "<div id='" + viewid + "'></div>";
  
 $("#" + 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)){
    HanderIE789($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 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='"+$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();
  }
 });
};

4. jquery.min.js

更多精彩內(nèi)容，請點擊《jQuery上傳操作匯總》，進行深入學習和研究。

以上就是本文的全部內(nèi)容，希望對大家學習jquery程序設計有所幫助。

您可能感興趣的文章:

jQuery 各種瀏覽器下獲得日期區(qū)別
在系統(tǒng)開發(fā)過程中經(jīng)常會用到系統(tǒng)的當前時間，然而我們遇到的問題確又是各個瀏覽器返回值不同，就像典型的IE和FF瀏覽器。
2008-12-12
jQuery 移動端artEditor富文本編輯器
這篇文章主要介紹了jQuery 移動端artEditor富文本編輯器的相關資料,需要的朋友可以參考下
2016-01-01
使用jQuery的ajax方法向服務器發(fā)出get和post請求的方法
這篇文章主要介紹了使用jQuery的ajax方法向服務器發(fā)出get和post請求的方法,需要的朋友可以參考下
2017-01-01
easyui下拉框動態(tài)級聯(lián)加載的示例代碼
本篇文章主要介紹了easyui下拉框動態(tài)級聯(lián)加載的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
jQuery原理系列-css選擇器的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨Query原理系列-css選擇器的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jQuery對象和DOM對象相互轉(zhuǎn)化
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象；
2009-04-04
jQuery Easy UI中根據(jù)第一個下拉框選中的值設置第二個下拉框是否可以編輯
這篇文章主要介紹了jQuery Easy UI中根據(jù)第一個下拉框選中的值設置第二個下拉框是否可以編輯的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
基于jquery trigger函數(shù)無法觸發(fā)a標簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無法觸發(fā)a標簽的兩種解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
jQuery對象和DOM對象之間相互轉(zhuǎn)換的方法介紹
這篇文章主要介紹了jQuery對象和DOM對象之間相互轉(zhuǎn)換的方法介紹,本文講解了jQuery對象轉(zhuǎn)成DOM對象、DOM對象轉(zhuǎn)換成jQuery對象方法,需要的朋友可以參考下
2015-02-02
jQuery結(jié)合CSS制作動態(tài)的下拉菜單
這篇文章主要介紹了jQuery結(jié)合CSS制作一個動態(tài)的下拉菜單，下拉菜單可以彌補空間的不足，感興趣的小伙伴們可以參考一下
2015-10-10