威尼斯人线上娱乐

javascript贯彻的图纸预览效率,JS完结获取图片大小和预览的点子完整实例

24 8月 , 2019  

本文实例陈述了JS完成无需上传的图样预览插件与用法。分享给大家供咱们参谋,具体如下:

正文实例陈说了javascript达成的图形预览功用。分享给大家供大家参照他事他说加以考察,具体如下:

正文实例叙述了JS实现获取图片大小和预览的格局。分享给我们供我们参照他事他说加以考察,具体如下:

先贴代码,之西晋密:

微小几十行代码,很牛逼,很实用。

1.将下边包车型地铁代码复制到<head>内

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS获取图片大小和预览【兼容IE和其它浏览器】</title>
</head>
<script type="application/javascript">
function previewImage(oImage,preViewId){
  if(!oImage.value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
    //alert('图片格式无效!');
    return;
  }
  var imgPath = "";
  if(document.all){
    //低版本IE浏览器
    oImage.select();
    imgPath = document.selection.createRange().text;
    //使用滤镜效果
    var tempValue = "progid:DXImageTransform.Microsoft.AlphaImageLoader("
    tempValue += "enabled='true',sizingMethod='scale',src=\"" + imgPath + "\")";
    document.getElementById(preViewId).style.filter = tempValue;
  }else{
    //非IE浏览器,如火狐google等浏览器
    imgPath = window.URL.createObjectURL(oImage.files[0]); //FF7.0以上
    document.getElementById(preViewId).src = imgPath; //显示预览图
  }
};
function getFileSize(objFile){
  var fileSize = objFile.fileSize || 0;
  if(fileSize == 0) {
    fileSize = objFile.files[0].size;
  }
  return fileSize;
}
function imageChange(){
  var oImg = document.getElementById("imageFile01");
  previewImage(oImg,"preview");
  var fileSize = getFileSize(oImg);
  fileSize = Math.ceil(fileSize / 1024) + "KB";
  var filePath =oImg.value;
  var agent = window.navigator.userAgent;
  var tempValue = "<br>File size: " + fileSize;
  tempValue += "<br>File path: " + filePath;
  tempValue += "<br>agent=" + agent;
  document.getElementById("imageInfo").innerHTML = tempValue;
};
</script>
<body>
<h3>JS获取图片大小和预览【兼容IE和其它浏览器】</h3>
<img id="preview" style="width: 100px; height: 60px; border: 0px;" />
<br>
<input name="imageFile01" id="imageFile01" type="file" onchange="javascript:imageChange();" />
<br>
<div id="imageInfo"></div>
</body>
</html>
<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>js多种方式图片预览-持续更新</title>
 </head>
 <body>
 <body> 
 <input type="file" id="file" value="选择" accept="image/*">
 <div style="width:300px;height:300px;border:1px solid #ccc">
 <img id="img_show" src="" />
 </div>

 </body>
 <script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
 <script type="text/javascript">
 //设置自己的变量存储区
 var Util = {
   file : $("#file"),
   image_show:$("#img_show")
 }


 Util.file.onchange=function(f){
  if(this.files[0].type.indexOf('image')<0){
   alert("请选择图片文件!");
   return; 
  }

  if(this.files[0].size/1024 > 5*1024){
   alert("图片过大,请选择5M以下的文件");
   return;
  }

  if(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function
   alert("您的浏览器不支持html5 fileReader请更换浏览器重试!");
   return;
  }


  var reader = new FileReader();
  reader.readAsDataURL(this.files[0]);//这里传的是一个blob ,其实file对象就是继承自bolob
  reader.onload=function(e){
   console.log(reader.result);//这里拿到的是一个base64编码后的图片
   Util.image_show.src=reader.result;
  }

 };

 </script>
</html>

威尼斯人线上娱乐 1

<script>
/*
Thumbnail image viewer-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
function enlarge(which,e){
//Render image code for IE 4+
if (document.all){
if (showimage.style.visibility=="hidden"){
showimage.style.left=document.body.scrollLeft+event.clientX
showimage.style.top=document.body.scrollTop+event.clientY
showimage.innerHTML='<img src="'+which+'">'
showimage.style.visibility="visible"
}
else
showimage.style.visibility="hidden"
return false
}
//Render image code for NS 4
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" rel="external nofollow" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
//if NOT IE 4+ or NS 4, simply display image in full browser window
else
return true
}
</script>
<script language="JavaScript1.2">
//By Dynamicdrive.com
//drag drop function for NS 4////
/////////////////////////////////
var nsx
var nsy
var nstemp
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for IE 4+////
/////////////////////////////////
var dragapproved=false
function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}
function initializedragie(){
if (event.srcElement.parentElement.id=="showimage"){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}
}
if (document.all){
document.onmousedown=initializedragie
document.onmouseup=new Function("dragapproved=false")
}
</script>

javascript贯彻的图纸预览效率,JS完结获取图片大小和预览的点子完整实例。运营效果图如下:

如上正是本文的全体内容,希望对我们的就学抱有协助,也希望我们多多帮忙脚本之家。

支撑多少个图片的预览,只要new多少个对象就行了。

2.在<body>中加入

威尼斯人线上娱乐 2

你或者感兴趣的篇章:

  • JS+HTML5落实上传图片预览效果总体实例【测量试验可用】
  • javascript贯彻的图片预览功效
  • javascript图片预览和上传(兼容IE)
  • 基于JavaScript达成本地图片预览
  • JS实现的图样预览插件与用法示例【不上传图片】
  • 微信js-sdk预览图片接口及从拍片或手提式有线电话机相册中选图接口用法示例
  • JS验证图片格式和尺寸并预览的轻巧实例
  • js完毕上传图片预览的形式
  • JS预览图像将本地图片呈现到浏览器上
  • js实现上传图片之上传前预览图片
  • Javascript图片上传前的地头预览实例
  • JS完结获取图片大小和预览的不二等秘书籍完整实例【兼容IE和别的浏览器】

html如下

复制代码 代码如下:

更加的多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript图片操作技能大全》、《JavaScript图形绘制技艺计算》、《JavaScript错误与调整技术计算》、《JavaScript数据结构与算法技术计算》、《JavaScript遍历算法与技术计算》及《JavaScript数学生运动算用法计算》

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>uploadPreview演示</title>
  <script src="uploadPreview.js" type="text/javascript"></script>
  <script>
    window.onload = function () { 
      new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
      new uploadPreview({ UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2" });
    }
  </script>
</head>
<body>
  <div id="imgdiv"><img id="imgShow" width="200"/></div>
  <input type="file" id="up_img" />
  <div id="imgdiv"><img id="imgShow2" width="200" /></div>
  <input type="file" id="up_img2" />
</body>
</html>

<div id=”showimage”
style=”position:absolute;visibility:hidden”></div>

盼望本文所述对我们JavaScript程序设计有所协理。

插件uploadPreview.js代码如下

3.在连年图片的地方如此写

您恐怕感兴趣的稿子:

  • JS+HTML5完结上传图片预览效果完全实例【测量检验可用】
  • javascript落到实处的图纸预览成效
  • javascript图片预览和上传(包容IE)
  • 基于JavaScript完成地点图片预览
  • 二种办法贯彻js图片预览
  • JS完成的图形预览插件与用法示例【不上传图片】
  • 微信js-sdk预览图片接口及从拍戏或手提式有线电话机相册中选图接口用法示例
  • JS验证图片格式和尺寸并预览的简易实例
  • js完成上传图片预览的措施
  • JS预览图像将地面图片显示到浏览器上
  • js实现上传图片之上传前预览图片
  • Javascript图片上传前的当地预览实例
/*
*发布时间:2014年12月12日
*插件介绍:图片上传本地预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 当然如果是使用这些内核的浏览器基本都兼容
*使用方法:
*界面构造(IMG标签外必须拥有DIV 而且必须给予DIV控件ID)
* <div id="imgdiv"><img id="imgShow" width="120" height="120" /></div>
* <input type="file" id="up_img" />
*调用代码:
* new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });
*参数说明:
*UpBtn:选择文件控件ID;
*DivShow:DIV控件ID;
*ImgShow:图片控件ID;
*Width:预览宽度;
*Height:预览高度;
*ImgType:支持文件类型 格式:["jpg","png"];
*callback:选择文件后回调方法;
*版本:v1.4
更新内容如下:
1.修复回调.
*版本:v1.3
更新内容如下:
1.修复多层级框架获取路径BUG.
2.去除对jquery插件的依赖.
*/
/*
*work:图片预览插件
*/
var uploadPreview = function(setting) {
  /*
  *work:this(当前对象)
  */
  var _self = this;
  /*
  *work:判断为null或者空值
  */
  _self.IsNull = function(value) {
    if (typeof (value) == "function") { return false; }
    if (value == undefined || value == null || value == "" || value.length == 0) {
      return true;
    }
    return false;
  }
  /*
  *work:默认配置
  */
  _self.DefautlSetting = {
    UpBtn: "",
    DivShow: "",
    ImgShow: "",
    Width: 100,
    Height: 100,
    ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
    ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
    callback: function() { }
  };
  /*
  *work:读取配置
  */
  _self.Setting = {
    UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
    DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
    ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
    Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
    Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
    ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
    ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
    callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
  };
  /*
  *work:获取文本控件URL
  */
  _self.getObjectURL = function(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  /*
  *work:绑定事件
  */
  _self.Bind = function() {
    document.getElementById(_self.Setting.UpBtn).onchange = function() {
      if (this.value) {
        if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
          alert(_self.Setting.ErrMsg);
          this.value = "";
          return false;
        }
        if (navigator.userAgent.indexOf("MSIE") > -1) {
          try {
            document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
          } catch (e) {
            var div = document.getElementById(_self.Setting.DivShow);
            this.select();
            top.parent.document.body.focus();
            var src = document.selection.createRange().text;
            document.selection.empty();
            document.getElementById(_self.Setting.ImgShow).style.display = "none";
            div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            div.style.width = _self.Setting.Width + "px";
            div.style.height = _self.Setting.Height + "px";
            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
          }
        } else {
          document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
        }
        _self.Setting.callback();
      }
    }
  }
  /*
  *work:执行绑定事件
  */
  _self.Bind();
}

复制代码 代码如下:

愈来愈多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript文件与目录操作技术汇总》、《JavaScript切换特效与手艺总计》、《JavaScript查找算法才干总括》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调治技艺总计》、《JavaScript数据结构与算法技术计算》、《JavaScript遍历算法与技能计算》及《JavaScript数学生运动算用法计算》

<a href=”photo1.jpg” rel=”external nofollow” onClick=”return
enlarge(‘photo1.jpg’,event)”><img src=”thumbnail.gif”
border=”0″></a>

企望本文所述对大家JavaScript程序设计有着扶助。

记念改变图片路线

您只怕感兴趣的篇章:

  • JS+HTML5贯彻上传图片预览效果完全实例【测量检验可用】
  • javascript达成的图样预览功用
  • javascript图片预览和上传(包容IE)
  • 基于JavaScript完成本地图片预览
  • 二种措施贯彻js图片预览
  • 微信js-sdk预览图片接口及从水墨画或手提式有线话机相册中选图接口用法示例
  • JS验证图片格式和分寸并预览的简约实例
  • js完结上传图片预览的格局
  • JS预览图像将地点图片突显到浏览器上
  • js完结上传图片之上传前预览图片
  • Javascript图片上传前的本土预览实例
  • JS实现获取图片大小和预览的方式完整实例【包容IE和任何浏览器】

越来越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript图片操作能力大全》、《JavaScript切换特效与能力总括》、《JavaScript图形绘制本事总计》、《JavaScript查找算法本事总计》、《JavaScript错误与调整本领总括》、《JavaScript数据结构与算法手艺计算》、《JavaScript遍历算法与技术计算威尼斯人线上娱乐 ,》及《JavaScript数学生运动算用法总结》

愿意本文所述对咱们JavaScript程序设计有着援助。

您或然感兴趣的稿子:

  • JS+HTML5达成上传图片预览效果完全实例【测验可用】
  • javascript图片预览和上传(兼容IE)
  • 基于JavaScript完结本地图片预览
  • 二种方式贯彻js图片预览
  • JS完结的图片预览插件与用法示例【不上传图片】
  • 微信js-sdk预览图片接口及从录制或手机相册中选图接口用法示例
  • JS验证图片格式和大小并预览的轻易实例
  • js达成上传图片预览的主意
  • JS预览图像将本地图片展示到浏览器上
  • js完结上传图片之上传前预览图片
  • Javascript图片上传前的本地预览实例
  • JS达成获取图片大小和预览的点子完整实例【包容IE和任何浏览器】


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图