来自 关于计算机 2019-09-04 19:49 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

HTML5落实图片上传前预览效果,基于JQuery完成图片

正文实例陈说了jQuery+HTML5得以实现图片上传前预览效果。分享给我们供大家参照他事他说加以考察。具体如下:

正文实例为大家享受了JQuery达成图片上传预览与删除的切切实实代码,经测量检验近期满意谷歌(Google)、火狐、360、IE6,7,8,9,10,11等浏览器,供大家参照他事他说加以考察,具体内容如下

此间根本是选择HTML5 的File API,创设一個可存取到该file的url,壹个空的img标签,ID为img0,把挑选的文件突显在img标签中,达成图片预览作用。请选取援助HTML API的浏览器,举个例子GoogleChrome和火狐等。

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>

图片 1

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);'>" +
    "上传图片" +
    "<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)'>" +
    "删除图片" +
    "<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("请选择正确的图片(jpg、jpeg、png)!");
    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("该浏览器不支持预览图片!");
   }

   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("请选择正确的图片(jpg、jpeg、png)!"); 
     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();
  }
 });
};
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" >
</form>
<script> 
$("#file0").change(function(){
 var objUrl = getObjectURL(this.files[0]) ;
 console.log("objUrl = "+objUrl) ;
 if (objUrl) {
  $("#img0").attr("src", objUrl) ;
 }
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
 var url = null ; 
 if (window.createObjectURL!=undefined) { // basic
  url = window.createObjectURL(file) ;
 } else if (window.URL!=undefined) { // mozilla(firefox)
  url = window.URL.createObjectURL(file) ;
 } else if (window.webkitURL!=undefined) { // webkit or chrome
  url = window.webkitURL.createObjectURL(file) ;
 }
 return url ;
}
</script>
</body>
</html>

4. jquery.min.js

瞩望本文所述对大家的jquery程序设计有着支持。

更加多精粹内容,请点击《jQuery上传操作汇总》,进行深刻学习和商讨。

您大概感兴趣的稿子:

  • jquery完毕图片上传前本地预览功效
  • 基于jquery完毕的上传图片及图片大小验证、图片预览效果代码
  • jQuery插件jcrop+Fileapi完美兑现图片上传+裁剪+预览的代码分享
  • 依照jquery实现图片上传本地预览效率
  • jquery完结包容浏览器的图纸上传本地预览功效
  • jQuery完成图片放大预览完成原理及代码
  • 逸事JQuery实现图片上传预览与删除操作
  • jQuery点击头像上传并预览图片
  • jquery达成图片上传从前预览的不二等秘书籍
  • jQuery达成鼠标经过图片预览大图效果
  • 差非常少完结jQuery上传图片显示预览效能
  • jQuery实现图片上传预览效果功能完全实例【测量检验可用】

以上正是本文的全部内容,希望对我们学习jquery程序设计有所协理。

您大概感兴趣的篇章:

  • jquery达成图片上传前本地预览功效
  • 依照jquery达成的上传图片及图片大小验证、图片预览效果代码
  • jQuery插件jcrop+Fileapi完美兑现图片上传+裁剪+预览的代码分享
  • 依赖jquery完结图片上传本地预览作用
  • jquery达成包容浏览器的图形上传本地预览成效
  • jQuery达成图片放大预览达成原理及代码
  • jQuery+HTML5兑现图片上传前预览效果
  • jQuery点击头像上传并预览图片
  • jquery达成图片上传此前预览的点子
  • jQuery达成鼠标经过图片预览大图效果
  • 简易完毕jQuery上传图片展现预览作用
  • jQuery完结图片上传预览效果作用一体化实例【测量检验可用】

本文由六合联盟网发布于关于计算机,转载请注明出处:HTML5落实图片上传前预览效果,基于JQuery完成图片

关键词: