现在的位置: 首页 > 综合 > 正文

使用JS实现在客户端判断上传文件大小

2017年02月20日 ⁄ 综合 ⁄ 共 1540字 ⁄ 字号 评论关闭

1. 参考链接的文章(点击打开链接)使用使用JS实现在客户端判断上传文件大小,结果发现有点问题,不能实现功能,稍微修改一下就可以了。

先前的应用如下:

 (1). html:

<span style="font-family:Arial;font-size:14px;"><div class="controls">
                        <img width="300" height="150" alt="${project[8]}" src="${base}/resources/image/${project[0]}/${project[8]}" class="lazy">
                        <input id="picture" type="file" size="45" name="picture" class="input">
                        <input type="hidden" value="${project[9]}" name="pictureId" id="pictureId">
                        <button class="btn btn-default" type="button" onclick="PROJECT.checkPictureExtension()">Upload</button>
                        <p class="help-block"></p>
                    </div></span>


(2)js:

<span style="font-family:Arial;font-size:14px;">$("input[name='picture']").bind({
                change:function(){
alert(1)
                    var file_size = 0;
                    if ( $.browser.msie && !this.files ) {
                        var file_path = this.value;
                        var file_system = new ActiveXObject("Scripting.FileSystemObject");
                        var file = file_system.GetFile (file_path);
                        file_size = file.Size;
                        alert(file_size/1024/1024 + " MB");
                    } else {
                        file_size = this.files[0].size;
                        console.log(file_size/1024/1024 + " MB");
                    }
                    var size = file_size / 1024;
                    if(size > 1024){
                        alert("上传的文件大小不能超过10M!");
                    }
                }
            });</span>


不能alert(1).

2. 后面搜索了一下,File input的change方法, 找到这篇文章(点击打开链接),修改了一下,就可以了。

<span style="font-family:Arial;"> $("#picture").live('change',function(){
                alert(1)
                var file_size = 0;
                if ( $.browser.msie && !this.files ) {
                    var file_path = this.value;
                    var file_system = new ActiveXObject("Scripting.FileSystemObject");
                    var file = file_system.GetFile (file_path);
                    file_size = file.Size;
                    alert(file_size/1024/1024 + " MB");
                } else {
                    file_size = this.files[0].size;
                    console.log(file_size/1024/1024 + " MB");
                }
                var size = file_size / 1024;
                if(size > 300){
                    alert("上传的文件大小不能超过10M!");
                }
            });</span>


抱歉!评论已关闭.