基于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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
js 页面输出值
Nov 30 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
python实现ping的方法
2015/07/06 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
工作过失检讨书
2014/02/23 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
贷款收入证明格式
2015/06/24 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Java如何实现树的同构?
2021/06/22 Java/Android
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS