js实现上传图片预览的方法


Posted in Javascript onFebruary 09, 2015

本文实例讲述了js实现上传图片预览的方法。分享给大家供大家参考。具体实现方法如下:

function PreviewImage(imgFile)

{

    var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);

    filextension=filextension.toLowerCase();

    if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))

    {

    alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");

    imgFile.focus();

    }

    else

    {

    var path;
    if(document.all)//IE

    {

    imgFile.select();

    path = document.selection.createRange().text;

   

    document.getElementById("imgPreview").innerHTML="";

    document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果  

    }

    else//FF

    {

    path = imgFile.files[0].getAsDataURL();

    document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";

    // document.getElementById("img1").src = path;

    }

    }

}

调用:

上传图片:   <input type="file" name="file"

      style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">

</div>

运行效果如下图所示:

js实现上传图片预览的方法

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 #Javascript
jquery实现相册一下滑动两次的方法
Feb 09 #Javascript
js点击选择文本的方法
Feb 09 #Javascript
JS动态加载当前时间的方法
Feb 09 #Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 #Javascript
angularJS 入门基础
Feb 09 #Javascript
javascript中函数作为参数调用的方法
Feb 09 #Javascript
You might like
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
基于python编写的微博应用
2014/10/17 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python3.x实现base64加密和解密
2019/03/28 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
Born鞋子官网:Born Shoes
2017/04/06 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
Delphi软件工程师试题
2013/01/29 面试题
中医专业应届生求职信
2013/11/17 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
个人向公司借款协议书
2016/03/19 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记