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

本文实例讲述了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>

运行效果如下图所示：

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

赞 (0)

相关推荐

  • js实现上传图片之上传前预览图片

    上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码 代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj

  • java中File类的使用方法

    构造函数 复制代码 代码如下: public class FileDemo {     public static void main(String[] args){         //构造函数File(String pathname)         File f1 =new File("c:\\abc\\1.txt");         //File(String parent,String child)         File f2 =new File("c:\\a

  • input file的默认value清空与赋值方法

    第1个方法是大多人传统做法,替换HTML代码,楼上的已经用到了,我不过是用正则优化一下; 第2个方法利用SendKeys模拟键盘操作,需要允许浏览器调用ActiveX才行: 第3个方法,有点像武侠小说里的"乾坤大挪移"一样,呵呵,看看就知道了! 把input file類型的value清空--Test by 编程浪子 function clearMethod1() { var objFile=document.getElementsByTagName('input')[0]; alert

  • input file样式修改以及图片预览删除功能详细概括（推荐）

    input file样式修改以及图片预览删除功能详细概括（推荐）

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这块儿的可以在自己添加修改. <!--点击预览图片--> <div class="picDiv"> <div class="addImages"> <!--multiple属性可选择多个图片上传--> <input t

  • 上传图片预览JS脚本 Input file图片预览的实现示例

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

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

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

    本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) {     var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);     filextension=filextension.toLowerCase();     if ((filext

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

    js实现上传图片预览方法

    图片预览的 javascript 本地操作 早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览 现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox 上图的html <tr> <td>缩略图</td> <td> <a href="javascript::void(0)" class="fileBtn&qu

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

    本文实例为大家分享了js上传图片预览的方法,供大家参考,具体内容如下 <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览</title> <style type="text/css"> #preview{width:260px;

  • 简单实现JS上传图片预览功能

    js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览 HTML代码 <div class="upload"> <input type="button" class="btn" onclick="browerfile.click()" value="上传"> <input type="file" id="browerfile

  • JS实现上传图片的三种方法并实现预览图片功能

    JS实现上传图片的三种方法并实现预览图片功能

    在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l

  • js兼容火狐显示上传图片预览效果的方法

    js兼容火狐显示上传图片预览效果的方法

    本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head> <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> <title>Image preview example</title> <style type=&

  • JS HTML5拖拽上传图片预览

    JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • JS上传图片预览插件制作（兼容到IE6）

    一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量. ②利用HTML5的新特性FileReader. 这个对象提供了

  • JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

    JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

    本文实例讲述了JS实现获取图片大小和预览的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • js 上传图片预览问题

    最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴.故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助. 我们一般根据IE6.IE7进行开发的时候写图片预览的代码是: 复制代码 代码如下: document.getElementById("img").src = document.getElementById("file").value; 还有一种方式 复制代码 代码如下: <d

随机推荐