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 秒表实现代码
Jul 24 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
一个简洁的多级别论坛
2006/10/09 PHP
php使用curl访问https示例分享
2014/01/17 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
python list转dict示例分享
2014/01/28 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Django组件cookie与session的具体使用
2019/06/05 Python
Python中的类与类型示例详解
2019/07/10 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
大学生简历求职信
2014/06/24 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
公司出差管理制度范本
2015/08/05 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
创业计划书之冷饮店
2019/09/27 职场文书