基于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优化效率 提升性能解决方案
Sep 06 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
Seajs源码详解分析
Apr 02 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python中类的继承代码实例
2014/10/28 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
2014年教师节寄语
2014/08/11 职场文书
企业委托书范本
2014/09/13 职场文书
长城的导游词
2015/01/30 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL