基于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 相关文章推荐
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
不安全的常用的js写法
2009/09/15 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
python 图片验证码代码
2008/12/07 Python
python迭代器的使用方法实例
2013/11/21 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
python实现分页效果
2017/10/25 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python二维键值数组生成转json的例子
2019/12/06 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
优秀教师事迹简介
2014/02/02 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
高三学生评语大全
2014/04/25 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2015年公司工作总结
2015/04/25 职场文书
python随机打印成绩排名表
2021/06/23 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js