基于JQuery实现图片上传预览与删除操作


Posted in Javascript onMay 24, 2016

本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌、火狐、360、IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下

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

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
用户注册常用javascript代码
Aug 29 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 #Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 #Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 #Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 #Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 #Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 #Javascript
JavaScript中判断数据类型的方法总结
May 24 #Javascript
You might like
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python django 访问静态文件出现404或500错误
2017/01/20 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
一套Java笔试题
2016/08/20 面试题
员工培训邀请函
2014/01/11 职场文书
展会邀请函范文
2014/01/26 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
高一学生期末评语
2014/04/25 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
《夸父追日》教学反思
2016/02/20 职场文书