如何通过js获取上传文件尺寸

 <input id="file_Up" name="file_Up" type="file" onchange="getFileSize(this.value)"/>

<input id="sub_Import" type="submit" value="导入" />

js中function getFileSize() {

    var btnsave = document.getElementById("sub_Import") 

    btnsave.disabled = true 

    var filepath = ""

    var fileupload = document.getElementById("file_Up")

    if (fileupload.value.length < 5) {

        alert('请选择文件！')

        return

    }

    var agent = window.navigator.userAgent

    if (agent.indexOf("Firefox") >= 1) {

        var maxsize = 4 * 1024 * 1024

        var size = fileupload.files[0].size

        if (size > parseInt(maxsize)) {

            alert("文件超过大小！")

            return false

        }

        else {

            btnsave.disabled = false

            return true

        }

 

    }

    else {

        fileupload.select()

        fileupload.blur()

        filepath = document.selection.createRange().text

        try {

            var fso, f, fname, fsize

            var flength = 4 * 1024 //设置上传的文件最大值（单位：kb），超过此值则不上传。 

            fso = new ActiveXObject("Scripting.FileSystemObject")

            f = fso.GetFile(filepath) //文件的物理路径

            fname = fso.GetFileName(filepath) //文件名（包括扩展名）

            fsize = f.Size //文件大小（bit）

            fsize = fsize / 1024

            //去掉注释，可以测试

            alert("文件路径：" + f)

            alert("文件名：" + fname)

            alert("文件大小：" + fsize + "kb")

            if (fsize > flength) {

                alert("上传的文件到小为：" + fsize + "kb,\n超过最大限度" + flength + "kb,不允许上传 ")

                return false

            }

            else {

                btnsave.disabled = false 

                return true

            }

        } catch (e) {

            alert(e + "\n 跳出此消息框，是由于你的activex控件没有设置好,\n" +

"你可以在浏览器菜单栏上依次选择\n" +

"工具->internet选项->\"安全\"选项卡->自定义级别,\n" +

"打开\"安全设置\"对话框，把\"对没有标记为安全的\n" +

"ActiveX控件进行初始化和脚本运行\"，改为\"启动\"即可")

            return false

        }

    }

 

}

在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。

本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。

本文参考 网道 ，总结而来。另外，强烈推荐网道，可以去 网道的官方 看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。

FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。

input 标签，将type设为file，之后得到的files属性就是一个FileList对象。

blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于 *** 作二进制文件，arraybuffer用于 *** 作内存。

blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。

File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。

FileList 对象中的每一项都是File 对象。

拿到File 对象之后就要进行 *** 作，下面是 *** 作。

URL.createObjectURL(file) 允许为File 对象创建一个临时链接，

FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是

FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。

在早期的互联网时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。

在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。

可以看看效果图

FormData 对象主要的方法有：

cavas压缩图片其实很简单，无非就是几个步骤：

1、选择图片，判断图片是否大于2M（用File对象的size进行判断，size的单位是字节）；

2、用FileReader对象读取文件成base64,

3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小)；

4、将cavas转成blob，拼在formdata中用ajax上传。

这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。

---