图片的上传预览功能主要用于图片上传前的一个效果的预览,这篇文章主要介绍了Javascript图片上传前的本地预览实例,需要的朋友可以参考下

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子。

原理:

分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL);把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。

在这里,我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。

File对象:

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.
下面来看获取FileList对象:


<script type="text/javascript" src="jquery.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getelementbyid('upload').files[0]);
});
</script>

Blob对象:

一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.
我们想要得到的对象URL实际上就是从Blob这个对象获取的,因为File的接口继承Blob。下面就来把Blob对象转换成URL:


<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>

兼容性:

上述方法适用于chrome浏览器
如果是IE浏览器可以直接使用input的value来代替src
网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的,现在这个方法都已经废除,类似的还有getAsText()和getAsBinary()方法,我们来看这样一个例子。


function getFullPath(obj) {  //得到图片的完整路径 
  if (obj) { 
//ie 
if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
  obj.select(); 
  return document.selection.createRange().text; 

//firefox 
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
  if (obj.files) { 
return obj.files.item(0).getAsDataURL(); 
  } 
  return obj.value; 

return obj.value; 
  } 
}

这段代码是获取客户端图片的完整路径
我们再限制其大小和格式


$("#loadFile").change(function () { 
var strSrc = $("#loadFile").val(); 
img = new Image(); 
img.src = getFullPath(strSrc); 
//验证上传文件格式是否正确 
var pos = strSrc.lastIndexOf("."); 
var lastname = strSrc.substring(pos, strSrc.length) 
if (lastname.toLowerCase() != ".jpg") { 
  alert("您上传的文件类型为" + lastname + ",图片必须为 JPG 类型"); 
  return false; 

//验证上传文件宽高比例 

if (img.height / img.width > 1.5 || img.height / img.width < 1.25) { 
  alert("您上传的图片比例超出范围,宽高比应介于1.25-1.5"); 
  return; 

//验证上传文件是否超出了大小 
if (img.fileSize / 1024 > 150) { 
  alert("您上传的文件大小超出了150K限制!"); 
  return false; 
}

其中,loadFile是html input file的id。在它的change事件,也就是选择了要上传的文件以后,让图片显示在图片框里吗,在上面代码的最后加上以下代码


$("#stuPic").attr("src", getFullPath(this));

既然用到了jQuery,下面我们再分享一个用jQuery的写的代码实例:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
 $(function(){
  var ei = $("#large");
  ei.hide();
  $("#img1").mousemove(function(e){
  ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
  }).mouseout( function(){
  ei.hide("slow");
  })
  $("#f1").change(function(){
  $("#img1").attr("src","file:///"+$("#f1").val());
  })
 });
</script>
<style type="text/css">
  #large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>

最新资讯
会员“买1得8”?蜻蜓FM遭集体投诉:骗人的

会员“买1得8”?蜻蜓FM

说好的买1个会员送8个其他App会员,买完以后发现并不是
松下回应“员工发‘918勿忘国耻’被警告”:将核查

松下回应“员工发‘91

松下电器(中国)有限公司微博回应称,针对近日松下员工发布
AMD:已获美国许可 向实体清单中某些公司供货

AMD:已获美国许可 向实

9月15日开始,美国的对华为禁令正式升级,台积电、高通、
中国探月工程副总设计师:嫦娥五号年底前发射

中国探月工程副总设计

预计今年底之前发射“嫦娥五号”,实现月球区域软着陆及
报告:全球科研城市北京排名第一 纽约第二

报告:全球科研城市北京

北京在全球科研城市中再次位列第一,第2至5位分别为纽约
量子通信重大进展:北京成功研制首台量子直接通信样机

量子通信重大进展:北京

实现了10公里光纤链路4kb/s通信速率的量子保密电话,推
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,