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

最新推荐文章于 2019-12-05 15:22:13 发布

茉莉花茶

最新推荐文章于 2019-12-05 15:22:13 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签： JS 判断上传文件大小

本文链接：https://blog.csdn.net/zhaoyingjiao/article/details/40818881

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript在客户端实现上传文件大小的判断。通过调整原有的HTML和利用File input的change方法，成功解决了不能正确判断的问题。

摘要由CSDN通过智能技术生成

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" οnclick="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>