IE+JS: 上传之前检测图片文件大小October

 来源: http://www.ugia.cn/?p=73

不得不佩服此人的巧妙的思想,简单几句话搞定了!

文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。不过在IE下img有几个附加的属性,如:fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters,我们可以通过这些属性来获取图片文件的部分信息,如文件大小,我们用file表单同img标签结合,就能够在上传之前判断图片文件的大小是否合法了。下面是Demo:

限制: K

还有一个小小的发现就是,IE下动画的onload事件是在每次循环开始都触发,这样我们可以通过他来达到和js里setInterval()函数一样的效果,如:

 loops: 0

这两个例子的源代码如下:
第一个:

限制:<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
<img src="about:blank" id="fileChecker" alt="test"  height="18"/>

<script type="text/javascript">
var oFileChecker = document.getElementById("fileChecker");

function changeSrc(filePicker)
{
    oFileChecker.src = filePicker.value;
}

oFileChecker.onreadystatechange = function ()
{
    if (oFileChecker.readyState == "complete")
    {
        checkSize();
    }
}

function checkSize()
{
    var limit  = document.getElementById("fileSizeLimit").value * 1024;

    if (oFileChecker.fileSize > limit)
    {
        alert("too large");
    }
    else
    {
        alert("ok");
    }
}
</script> 

第二个:

<img src="monkey.gif" id="monkey" alt="monkey" /> loops: <span id="loopsNum"></span>

<script type="text/javascript">
var loops = 0;
document.getElementById("monkey").onload = function ()
{
    document.getElementById("loopsNum").innerText= loops;
    loops ++;
}
</script> 

另外补充一些手册里的东西:
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
MAX_FILE_SIZE 隐藏字段(单位为字节)必须先于文件输入字段,其值为接收文件的最大尺寸。这是对浏览器的一个建议,PHP 也会检查此项。在浏览器端可以简单绕过此设置,因此不要指望用此特性来阻挡大文件。实际上,PHP 设置中的上传文件最大值是不会失效的。但是最好还是在表单中加上此项目,因为它可以避免用户在花时间等待上传大文件之后才发现文件过大上传失败的麻烦。

注意:本文所讨论的特性仅在IE下有效。

时间: 2024-10-06 05:39:07

IE+JS: 上传之前检测图片文件大小October的相关文章

JS上传预览图片 上传图片前预览代码

  JavaScript代码实现图片上传前预览,当然是在本地预览,这样可以让用户知道所选择的图片是否正确,实现此功能并不复杂,一段JS代码即可搞定.以下是一个完整的例子,你可以复制代码保存成html网页,然后打开这个网页测试效果.

js上传图片-js上传文件时各种浏览器判断文件大小不兼容。

问题描述 js上传文件时各种浏览器判断文件大小不兼容. 最近有一个需求,要上传一张图片到服务器,但是要求在页面上判断文件大小,而不是在后台判断,其他浏览器可以轻松做到,但是ie浏览器却没有办法做到,有哪位大神做过这种东西的,要求可以兼容几个主流浏览器,无论是使用js或者是jquery都可以,要实际做过的,拷贝过来的就别回复了,谢谢.

JS中使用FormData上传文件、图片的方法_javascript技巧

关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

kindeditor上传完成后图片裂了,是什么问题?怎么修改

问题描述 kindeditor上传完成后图片裂了,是什么问题?怎么修改 初步判断应该是路径问题,如果是路径问题,那么在哪里修改路径呢? 解决方案 Kindeditor跨域上传图片正确修改方法 解决方案二: 服务器端直接返回绝对路径 ,就是 /upload/xxxxx.jpg 这种路径,要不你要修改kindeditorpluginsimageimage.js afterUpload : function(data) { dialog.hideLoading(); if (data.error ==

关于FCKeditor上传后的图片文件

问题描述 我上传完的图片.如果以后不用了.根据什么来检测.怎么删除他们 解决方案 解决方案二:不太好实现,除非你改FCKeditor的图片上传方式解决方案三:麻烦解决方案四:你可以修改上传程序,增加一个存入数据库的操作就可以了.顺便说一声,很多操作都可以通过修改这个文件来实现的,比如水印,放大缩小等等.解决方案五:不是很好改解决方案六:不好改,现在硬盘这么便宜,这么做不值得吧?解决方案七:定时到服务器上去手动删除.解决方案八:删他干啥..留着吧..

js 上传文件预览的简单实例_javascript技巧

1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat

微信js-sdk上传与下载图片接口用法示例_javascript技巧

本文实例讲述了微信js-sdk上传与下载图片接口用法.分享给大家供大家参考,具体如下: 前提已经在wx.config()中,将图片接口验证通过. 微信js-sdk 中上传图片接口(uploadImage)和下载图片接口(downloadImage)都是针对微信服务器本身的.以官方文档为准 注: 1.使用chooseImage接口获取到微信客户端图片地址的与都是 weixin://xxxx 2.上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 medi

ASP.NET 在上传文件前判断文件大小的问题

问题描述 ASP.NET在上传文件前判断文件大小的问题大家好,VisualStudio的WebForm中我用了FileUpload控件来向数据库提交文件,我知道IIS默认限制4M:而我是通过程序控制到了3M以下.但每次判断都是文件上载之后,才能通过FileUpload1.PostedFile.ContentLength取到文件大小.如果用户上传了大于4M或更大的文件,IE会报错,体验不好:请问ASP.NET是否有办法在文件上载之前,判断文件大小呢? 解决方案 解决方案二:JQuery验证文件大小