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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
浅谈javascript中return语句
Jul 15 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
JS实现页面打印功能
2017/03/16 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python decimal模块使用方法详解
2020/06/08 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
挂牌仪式主持词
2014/03/20 职场文书
租房合同协议书
2014/04/09 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
写给导师的自荐信
2015/03/06 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
Nginx如何配置根据路径转发详解
2022/07/23 Servers