`
xylw
  • 浏览: 60306 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
文章分类
社区版块
存档分类
最新评论

上传图片前预览本地图片

阅读更多
<input id="file" type="file" onfocus="javascript:ShowImage(this.value,document.getElementById('pimg'))"> 
<br /> 
<img id="pimg"    style="visibility:hidden" height="100px" width="100px"> 

<script language="javascript" type="text/javascript"> 
  //============================== 
  //功能:Javascript本地图片预览 
  //说明:简单的判断了文件的合法性 
  //适用于:上传文件前预览本地图片 
  //============================== 
    function ShowImage(value,img) 
        { 
            //alert(value); 
            //检测盘符 
            //alert(value.indexOf(':')); 
            //检测文件是否有扩展名 
            //alert(value.length-value.lastIndexOf('.')); 
            //取文件扩展名 
            //alert(value.substr(value.length-3,3)); 
            //检测文件扩展名是否合法 
            //alert(CheckExt(value.substr(value.length-3,3))); 
             
                if(value.length>5&&value.indexOf(':')==1&&(value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3))) 
                { 
                        img.src=value; 
                        img.alt="本地图片预览"; 
                        img.style.visibility="visible"; 
                } 
                else 
                { 
      img.style.visibility="hidden"; 
    } 
        } 
        //检查扩展名是否合法,合法返回True 
        function CheckExt(ext) 
        { 
          //这里设置允许的扩展名 
          var AllowExt="jpg|gif|jpeg|png|bmp"; 
          var ExtOK=false; 
      var ArrayExt; 
      if(AllowExt.indexOf('|')!=-1) 
      { 
        ArrayExt=AllowExt.split('|'); 
        for(i=0;i<ArrayExt.length;i++) 
        { 
          if(ext.toLowerCase()==ArrayExt[i]) 
          { 
            ExtOK=true; 
            break; 
          } 
        } 
      } 
      else 
      { 
        ArrayExt=AllowExt; 
        if(ext.toLowerCase()==ArrayExt) 
        { 
          ExtOK=true; 
        } 
      } 
      return ExtOK; 
        } 
</script>
分享到:
评论

相关推荐

    图片上传本地预览插件

    在IT领域,图片上传本地预览插件是一个常见的功能组件,尤其在网页应用和桌面软件中,它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前,能够在本地环境中预览图片效果,确保图片的...

    jsp 本地图片上传前的预览

    在用户上传图片之前提供预览功能,能够提升用户体验,让用户在正式提交前确认图片效果。本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能,结合jQuery库来增强前端交互。 首先,我们要理解JSP(Java...

    ie8下上传图片无法预览本地图片解决方法技术资料

    ### IE8下上传图片无法预览本地图片解决方法技术资料 #### 背景与问题描述 在Web开发过程中,特别是在处理旧版本浏览器兼容性问题时,经常会遇到各种各样的挑战。Internet Explorer 8(IE8)作为一款较早的浏览器...

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在图片上传中,JS通常用于处理用户选择文件后在本地预览图片,验证文件类型和大小,以及提供一个友好的用户体验,如进度条显示上传进度。 1. **图片预览**:使用HTML5的FileReader API,开发者可以读取用户选择的...

    详解nodejs实现本地上传图片并预览功能(express4.0+)

    写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...

    jquery图片上传前预览 无需上传至服务器

    在IT行业中,尤其是在Web开发领域,用户经常需要上传图片,而提供一个图片上传前的预览功能能够极大地提升用户体验。这个“jquery图片上传前预览 无需上传至服务器”的技术方案,就是解决这一问题的一种方法。它允许...

    Jquery 表单验证+本地图片上传-切割-预览

    在本项目中,"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例,它涵盖了几个重要的JavaScript库和技术,包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释:...

    jQuery点击头像上传本地预览裁剪图片

    这个功能允许用户在上传头像前预览并裁剪图片,提高了上传过程的可控性和便捷性。下面我们将详细探讨这一技术实现的各个环节。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及...

    jquery 本地上传图片预览Demo

    在本文中,我们将深入探讨如何使用jQuery实现本地图片上传预览功能,这是一项常见的Web开发需求,尤其是在构建交互式用户界面时。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互...

    上传并预览图片

    1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型...

    上传图片本地预览效果

    在现代Web应用中,"上传图片本地预览效果"是一个常见的功能,特别是在社交媒体、电子商务、图像编辑等场景中。这个功能允许用户在选择图片后,无需等待上传完成就能在页面上即时预览所选的图片,提升了用户体验。...

    .net批量上传图片带预览功能

    在.NET开发环境中,批量上传图片并提供预览和进度条功能是常见的需求,尤其是在构建Web应用时。这个项目提供了一种实现方式,包括源码,可以直接用于开发中。以下是对这个知识点的详细解释: 批量上传图片:批量...

    input file上传图片预览

    在前端开发中,"input file上传图片预览"是一个常见的需求,它允许用户选择本地的图像文件,并在上传前提供预览。这个功能在许多网站和应用中都很实用,例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...

    PHP上传图片带预览功能

    上传图片"&gt; ``` 这里的`enctype="multipart/form-data"`属性是必须的,因为它允许我们发送二进制数据(如图片)到服务器。 接下来,我们需要在`upload.php`文件中处理上传请求。PHP的`$_FILES`全局数组包含了...

    本地图片上传即时预览

    标题中的“本地图片上传即时预览”是一个常见的前端开发功能,尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果,无需等待图片实际上传到服务器。...

    js读取本地图片进行预览,上传服务器

    在JavaScript中,本地图片的预览和上传到服务器是一个常见的需求,特别是在Web应用中,比如社交媒体、博客编辑器或者在线图像处理工具。本项目着重于实现这个功能,提供了源码和工具来帮助开发者轻松实现这一过程。...

    图片上传及预览+时间水印

    其次,图片预览是用户在上传图片前能在界面上看到即将上传图片的效果,这增强了用户体验,减少了因上传错误图片而产生的额外操作。预览通常是在前端完成的,通过FileReader API读取图片数据,然后使用`DataURL`显示...

    html5图片上传本地生成缩略图预览

    这样,用户在上传图片前就能看到缩略图,提升交互性。 实现这个功能的基本步骤如下: 1. **监听文件输入事件**:使用HTML的`&lt;input type="file"&gt;`元素,监听change事件。当用户选择文件后,该事件会被触发。 2. *...

    Flex4.6+java+servlet上传图片例子+图片上传预览

    用户可以通过Flex应用选择本地图片,然后在上传前进行预览。 接着,Java Servlet作为后端处理程序,负责接收由Flex前端发送的图片数据。Servlet是一种Java技术,它扩展了Web服务器的功能,允许开发者编写动态响应的...

    上传文件前,本地预览图片功能,支持所有主流浏览器

    在IT行业中,本地预览图片是一项重要的用户体验优化技术,它允许用户在上传图片到服务器之前在客户端进行预览,...通过以上方法,我们可以为用户提供一个高效、友好的本地图片预览功能,提升他们使用网站或应用的体验。

Global site tag (gtag.js) - Google Analytics