网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于JQuery实现图片上传预览与删除操作
内容
    这篇文章主要为大家详细介绍了基于JQuery实现图片上传预览与删除操作的相关代码，感兴趣的小伙伴们可以参考一下
    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 id="imgupload1"></div>
      <div 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();
        }
      });
    };
    以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/25 6:22:22