Javascript图片上传前的本地预览实例_Javascript教程-查字典教程网
Javascript图片上传前的本地预览实例
Javascript图片上传前的本地预览实例
发布时间:2016-12-30 来源:查字典编辑
摘要:图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图...

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有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 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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类