javascript 客户端验证上传图片的大小(兼容IE和火狐)

 更新时间:2009年08月15日 01:53:02   作者:  
做web开发的哥们都会遇到批量上传图片的需求,相信大家都会遇到这样的问题,当选择好要上传的图片,提交服务器后,发现有图片的大小超过了系统允许的范围。
在我 上一篇帖子 (译文 ) 中,谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示,对于Internet Explorer 来说,当浏览器执行了数量过多的语句时就会停止执行脚本,而其他的浏览器,则是持续执行脚本超过一定时间的时候就会给出提示。而我们要探讨的核心问题,不是这些浏览器如果探测失控的脚本,而是我们如何才可以让脚本运行的更快一些,从而避免这些警告 。
脚本失控基本上有以下四个方面的原因:
在循环中执行了太多的操作。
臃肿的函数体
过多的递归
过多的 DOM 调用
在这篇帖子中,我将会把重点放到第一条上:循环中的过多操作。循环的操作是同步进行的,所以执行一个循环所花费的时间完全取决于循环的次数。因此有 两种情况会导致循环执行的时间过长,并直接导致锁定浏览器。一是循环体中包含了太多的操作,二是循环的次数过多。这两种情况都能直接导致锁定浏览器,并显示脚本失控的提示。
解决这个问题的诀窍就是用下面这两个问题来评估每个循环:
这个循环必须要同步执行么?
循环里面的数据,必须要按顺序执行么?
如果两个问题的答案都是否定的话,你就可以选择将循环 里的操作进行分解。关键是要根据代码的具体环境确定上面两个问题的答案。一个典型的循环可能像下面这个样子:
复制代码 代码如下:

for(var i=0; i < items.length; i++){
process(items[i]);
}

乍一看这个循环并没有太大的问题,是不是会运行很长时间完全取决于循环的次数。如果紧接循环后没有其他代码在执行的时候需要依赖于循环的结果,那么 对于第一个问题的答案就是“ 不” 。你还可以发现,循环每次只处理一个数值,而且不依赖于上一次循环的结果,所以对于第二个问题的答案同样也是否定的。这就意味着,循环可以通过某种方式进行拆解,不会导致锁定浏览器而显示脚本失控的提示。
在《Professional JavaScript, Second Edition 》这本书中,对于那些执行次数非常巨大的虚幻,我推荐使用下面的方式来处理:
复制代码 代码如下:

function chunk(array, process, context){
setTimeout(function(){
var item = array.shift();
process.call(context, item);
if (array.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}

chunk() 函数的用途就是将一个数组分成小块处理(这也是名字的由来),我们可以传递三个参数。要处理的数组对象、处理函数以及一个可选的上下文变量,用于设置process() 函数中对应的this 对象。第一个timer 用于处理操作之间的延时(这里设置为100 毫秒,大家可以根据实际需要自行修改)。每次执行这个函数,都会将数组中的第一个对象取出,并传给process() 函数进行操作,如果这时process() 中还有未处理完的对象, 另外一个timer 就会启动,用于重复等待。上面提到的循环,可以通过下面的方法使用这个函数:
chunk(items, process);
需要注意的是,在这里数组采用了队列(queue )的形式,而且在循环的过程中,每次都会发生修改。如果你要修改数组的原始状态,这里介绍两种途径:一种是通过concat() 函数,在传递之前,建立一个当前数组的副本:
chunk(items.concat(), process);
另外一种选择是直接修改chunk() 函数,直接在函数内部进行修改:
复制代码 代码如下:

function chunk(array, process, context){
var items = array.concat(); //clone the array
setTimeout(function(){
var item = items.shift();
process.call(context, item);
if (items.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}

注意这种方法要比只保存一个索引安全的多,因为数组的内容在下次计时器生效之前可能会发生变化。
这里提到的chunk() 函数,只是优化循环性能的一个起点。你可以根据需要不断改进它,让它拥有更多的功能。比如说,在数组中所有对象都处理完成以后,可以增加一个函数回调。无论你是否会按照这种方式对函数进行修改,这只是一种JavaScript 的代码开发模式,可以帮助优化数组的处理性能,还可以避免那个脚本失控的警告。

相关文章

  • function, new function, new Function之间的区别

    function, new function, new Function之间的区别

    function, new function, new Function之间的区别...
    2007-03-03
  • 深入理解选择框脚本[推荐]

    深入理解选择框脚本[推荐]

    选择框是通过<select>和<option>元素创建的,又称为下拉列表框。为了方便与这个控件交互,除了所有表单字段共有的属性和方法外,javascript还提供了一些属性和方法。本文将详细介绍选择框脚本
    2016-12-12
  • 一组JS创建和操作表格的函数集合

    一组JS创建和操作表格的函数集合

    在用AJAX的时候,经常要用JS操作DOM,当涉及到数据列表的时候,那用表格比较多,这里写了组函数集合,专门用来操作表格,当然,目前还有很多不足,但是对一些简单操作还是很方便的。
    2009-05-05
  • 微信小程序实现select下拉框

    微信小程序实现select下拉框

    这篇文章主要为大家详细介绍了微信小程序实现select下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 微信小程序蓝牙连接小票打印机实例代码详解

    微信小程序蓝牙连接小票打印机实例代码详解

    这篇文章主要介绍了微信小程序蓝牙连接小票打印机实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 终于解决了IE8不支持数组的indexOf方法

    终于解决了IE8不支持数组的indexOf方法

    今天,测试报过来一个js bug, 在IE8下有个js错误,但是在其它浏览器下(Firefox, Chrome, IE9)下面都很正常。后来调试发现原因是在IE8下,js数组没有indexOf方法。
    2013-04-04
  • Actionscript与javascript交互实例程序(修改)

    Actionscript与javascript交互实例程序(修改)

    这篇文章主要介绍了Actionscript与javascript交互实例程序(修改)的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • JavaScript闭包实例讲解

    JavaScript闭包实例讲解

    众所周知,JavaScript没有块级作用域,只有函数作用域。那就意味着定义在函数中的参数和变量在函数外部是不可见的,而在一个函数内部任何位置定义的变量,在该函数内部任何地方都可见
    2014-04-04
  • 时间戳转换为时间 年月日时间的JS函数

    时间戳转换为时间 年月日时间的JS函数

    这篇文章介绍了时间戳转换为时间 年月日时间的JS函数,有需要的朋友可以参考一下
    2013-08-08
  • 详解ES6 Promise的生命周期和创建

    详解ES6 Promise的生命周期和创建

    这篇文章主要介绍了详解ES6 Promise Promise的生命周期和创建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论