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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
js 求时间差的实现代码
Apr 26 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
浅谈React Native 中组件的生命周期
Sep 08 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之Memcache学习笔记
2013/06/17 PHP
php实现图片添加水印功能
2014/02/13 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
python实现邮件循环自动发件功能
2020/09/11 Python
基于Python正确读取资源文件
2020/09/14 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
网上商城创业计划书范文
2014/01/31 职场文书
班班通项目实施方案
2014/02/25 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
学术会议通知
2015/04/15 职场文书
未中标通知书
2015/04/17 职场文书
英语读书笔记
2015/07/02 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
python实现学生信息管理系统(面向对象)
2022/06/05 Python