`
mengdejun
  • 浏览: 407338 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS获取上传文件缩略图

    博客分类:
  • JS
阅读更多
<script language=JavaScript>
var flag=false;
function DrawImage(ImgD){
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= 120/80){
     if(image.width>120){  
     ImgD.width=120;
     ImgD.height=(image.height*120)/image.width;
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    else{
     if(image.height>80){  
     ImgD.height=80;
     ImgD.width=(image.width*80)/image.height;     
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    }
   /**//**//**//*else{
    ImgD.src="";
    ImgD.alt=""
    }*/
   } 

function FileChange(Value){
flag=false;
document.all.uploadimage.width=10;
document.all.uploadimage.height=10;
document.all.uploadimage.alt="";
document.all.uploadimage.src=Value;
}

function BeforeUpLoad(){
if(flag) alert("OK");else alert("FAIL");
}
</script>
<INPUT style="WIDTH: 143px; HEIGHT: 18px" type=file size=8 name=pic onchange="javascript:FileChange(this.value);"> 
<IMG id=uploadimage height=10 width=10 src=""  onload="javascript:DrawImage(this);" ><BR>
<Button onclick="javascript:BeforeUpLoad();">提交</Button>

 

  dem2.html

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

<script language="javascript" type="text/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>

 

 

  • ss.rar (1.4 KB)
  • 下载次数: 38
分享到:
评论

相关推荐

    通过视频地址获取视频缩略图

    在IT行业中,获取视频缩略图是一项常见的任务,特别是在视频分享、播放器开发或网站设计等领域。本教程将深入探讨如何仅通过视频地址来获取视频的缩略图,这是一个高效且实用的技术。以下是对这个主题的详细阐述: ...

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

    6. **处理上传**:用户确认预览无误后,可以将原始文件或缩略图数据URL发送到服务器进行存储或进一步处理。 需要注意的是,这个过程可能会涉及到跨域问题,因为Data URL被视为一个远程源。因此,服务器端可能需要...

    JSP上传图片并生成缩略图

    当文件上传成功后,我们会根据文件的大小和类型将其保存到服务器,并生成一个与原图具有相同文件名但带_min后缀的缩略图。 缩略图的生成是通过Java的图像处理库完成的。我们使用`javax.imageio.ImageIO`来读取上传...

    可以用的php多图片上传显示缩略图

    在PHP中,可以使用`$_FILES`全局变量来获取上传的文件信息。例如,`$_FILES['image']['name']`获取文件名,`$_FILES['image']['tmp_name']`获取临时文件路径,`$_FILES['image']['size']`获取文件大小等。 上传过程...

    PHP+js 上传视频、预览、缩略图、视频时长

    这个项目以"PHP+js 上传视频、预览、缩略图、视频时长"为主题,显然是一个利用PHP和JavaScript技术实现的Web应用实例,主要应用于用户交互和多媒体处理。下面我们将详细探讨这些知识点。 1. **PHP上传视频**: PHP...

    html5移动端图片上传本地生成缩略图预览(单图上传)

    综上所述,利用HTML5的File API和Canvas,我们可以在移动端实现图片上传时的本地预览和缩略图生成,提升用户交互体验。在实际项目中,还可以结合其他技术如Promise、async/await等优化代码结构,提高代码可读性和...

    无刷新上传--可生成缩略图--demo.zip

    远程上传是指用户不仅可以从本地计算机上传文件,还可以输入远程URL,让服务器直接下载该URL指向的文件。这种功能在某些情况下非常实用,比如用户想要分享网络上的一个文件。实现远程上传,需要PHP支持cURL库,通过...

    struts2图片上传并生成缩略图,展示缩略图点击显示大图

    为了在前端展示图片,可以创建一个JSP页面,用HTML和JavaScript来显示缩略图。这里我们可以使用jQuery的FancyBox插件,它提供了优雅的图片预览效果。在WebRoot目录下,创建一个JSP文件,比如`image.jsp`,包含以下...

    jquery实时缩略图加载显示.rar

    总之,使用jQuery实现实时缩略图加载显示是一项实用的技能,它结合了事件处理、文件API和DOM操作等多个JavaScript核心概念。通过学习和实践,你将能够为你的网站或应用增添更多互动性和用户体验。

    头像上传插件 带裁切 缩略图,旋转等功能

    在前端,可以使用JavaScript库如sharp或canvas来实时生成缩略图;在后端,服务端语言如PHP、Node.js也可以通过相应库处理。关键在于保持图片比例,防止拉伸变形,同时控制缩略图质量以平衡大小和清晰度。 4. **旋转...

    图片上传即时显示缩略图的js代码

    总结一下,这个JavaScript代码实现了一个简单的图片上传预览功能,通过创建一个`Picture`类来处理文件对象,然后在`&lt;img&gt;`元素上显示缩略图。它考虑了不同浏览器之间的兼容性问题,同时提供了扩展名的验证。为了在...

    canvas压缩图片并展示缩略图

    在网页开发中,有时我们需要对上传的图片进行压缩处理,以减少存储空间占用和网络传输时间,同时在处理完成后快速地展示缩略图。这里我们将深入探讨如何利用HTML5的Canvas API来实现这一功能。 首先,`canvas`是...

    JS 按图片比例截取中间部分 缩略图不失真

    在JavaScript(JS)中,创建一个按比例截取图片中间部分并保持图片不失真的缩略图功能是一项常见的需求。这通常应用于图片预览、相册展示等场景,以提高用户体验和节省网页加载资源。以下是对这个主题的详细阐述: ...

    uploadify 整合thinkPHP上传加缩略图

    首先,获取上传图片的信息,然后根据预设的尺寸比例生成缩略图,最后保存到指定目录。 - 可以设置多个缩略图尺寸,满足不同场景的需求,如列表展示的小图、详情页的大图等。 5. **Bootstrap布局** 页面采用`...

    SWFUpload for ASP.Net 4.0 上传 带缩略图

    5. **缩略图生成**: 如果需要在上传过程中生成缩略图,可以在服务器端利用.NET Framework的图像处理类库,如System.Drawing,读取上传文件,调整尺寸并保存为缩略图。也可以使用第三方库如ImageMagick或FreeImage,...

    c#多图片上传并生成缩略图的实例代码

    在本文中,作者通过C#语言实现了一个图片上传并生成缩略图的小程序。该程序主要包括两个主要部分:前台用户界面代码和后台处理代码。以下详细知识点梳理: ### 前台用户界面代码知识点: 1. **HTML表单:** 使用`...

    上传图片并显示缩略图

    前端可以使用JavaScript库如`jQuery`或者原生的`fetch` API获取数据,然后更新DOM元素,将缩略图插入到页面适当的位置。 4. **响应式设计**:为了适应不同设备和屏幕尺寸,缩略图的大小和布局可能需要动态调整。这...

    jquery实现图片预览,缩略图,效果不错

    在网页开发中,图片预览和缩略图功能是非常常见的需求,尤其在用户上传图片或者浏览相册时。jQuery作为一个轻量级的JavaScript库,提供了丰富的API和插件,使得实现这样的功能变得简单易行。本示例中的"jQuery实现...

Global site tag (gtag.js) - Google Analytics