脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript图片本地预览

Javascript图片上传前的本地预览实例

 更新时间：2014年06月16日 12:08:04   投稿：shichen2014  
图片的上传预览功能主要用于图片上传前的一个效果的预览，这篇文章主要介绍了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>

您可能感兴趣的文章:

相关文章

  • JS实现判断有效的数独算法示例

    JS实现判断有效的数独算法示例

    这篇文章主要介绍了JS实现判断有效的数独算法,结合实例形式分析了javascript数独判断的原理及相关算法实现、使用操作技巧,需要的朋友可以参考下
    2019-02-02
  • JavaScript注册监听事件和清除监听事件方式详解

    JavaScript注册监听事件和清除监听事件方式详解

    js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,下面这篇文章主要给大家介绍了关于JavaScript注册监听事件和清除监听事件方式的相关资料,需要的朋友可以参考下
    2023-05-05
  • javascript解决IE6下hover问题的方法

    javascript解决IE6下hover问题的方法

    本文分享了一个小技巧：javascript解决IE6下hover问题的方法，方法很实用,需要了解的朋友可以参考下
    2015-07-07
  • js 关键词高亮(根据ID/tag高亮关键字)案例介绍

    js 关键词高亮(根据ID/tag高亮关键字)案例介绍

    关键词高亮在开发中会带来很多的方便，关键词高亮包括:根据ID高亮关键字/根据Tag名高亮关键字等等，感兴趣的朋友可以了解下，希望本文对你有所帮助
    2013-01-01
  • JavaScript判断字符长度、数字、Email、电话等常用判断函数分享

    JavaScript判断字符长度、数字、Email、电话等常用判断函数分享

    这篇文章主要介绍了JavaScript判断字符长度、数字、Email、电话等常用判断函数分享,本文直接给出实现代码,需要的朋友可以参考下
    2015-04-04
  • JavaScript原生对象之String对象的属性和方法详解

    JavaScript原生对象之String对象的属性和方法详解

    这篇文章主要介绍了JavaScript原生对象之String对象的属性和方法详解,本文讲解了length、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()等方法属性,需要的朋友可以参考下
    2015-03-03
  • 详解js中的几种常用设计模式

    详解js中的几种常用设计模式

    这篇文章主要介绍了js中的几种设计模式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • JavaScript中arguments.callee属性的作用与替换方案

    JavaScript中arguments.callee属性的作用与替换方案

    这篇文章介绍了JavaScript中arguments.callee属性的作用与替换方案，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • js模拟支付宝密码输入框

    js模拟支付宝密码输入框

    这篇文章主要为大家详细介绍了js模拟支付宝密码输入框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JavaScript监控埋点的实现与详细用法

    JavaScript监控埋点的实现与详细用法

    埋点（Event Tracking）是用户行为监控的一种技术手段,通常用于收集用户在网站或应用中的操作数据,例如点击、页面浏览、滚动等,本文给大家介绍了JavaScript监控埋点的实现与详细用法,需要的朋友可以参考下
    2024-10-10

最新评论