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


Posted in Javascript onJune 16, 2014

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有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>
Javascript 相关文章推荐
js转义字符介绍
Nov 05 Javascript
javascript常用函数(2)
Nov 05 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 #Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 #Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
You might like
PHP 变量定义和变量替换的方法
2009/07/30 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php编写简单的文章发布程序
2015/06/18 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
jQuery中queue()方法用法实例
2014/12/29 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
Python 如何提高元组的可读性
2019/08/26 Python
python实现IOU计算案例
2020/04/12 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python如何变换环境
2020/07/21 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
竞聘书怎么写,如何写?
2014/03/31 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
合作协议书范文
2014/08/20 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书