e.target.files[0]详情与原因全套参数

站长苏飞

   

因为我现在拿到的一个功能是上传时过滤掉很大尺寸的图片，所以需要来拿到上传时选择图片的size,所以有了这篇博文

不多说 上代码

$('input').change(function(e){

console.log(e)==>得到的是什么呢

　　得到的是：下面这些

[C#] 纯文本查看 复制代码

altKey:undefined
bubbles:true
cancelable:false
ctrlKey:undefined
currentTarget:input
data:null
delegateTarget:input
detail:undefined
eventPhase:2
handleObj:Object
isDefaultPrevented:h()
jQuery22007808826687871413:true
metaKey:undefined
originalEvent:Event
relatedTarget:undefined
shiftKey:undefined
target:input
timeStamp:3956.0400000000004
type:"change"
view:undefined
which:undefined
__proto__:Object

console.log(e.target)又会得到什么呢？

　　得到的是input对象<input type="file" multiple="multiple" style="top: 91px; left: 44px; position: absolute; opacity: 0; z-index: 1000;">

console.log(e.target.files)呢，得到的又是什么呢？

　　得到的是一串filelist

[C#] 纯文本查看 复制代码

FileList
length:0
__proto__:FileList

console.log(e.target.files[0])又能得到什么呢

　　得到的是第一张input选择的图片的一些参数，得到的这些参数可以根据自己的需要提取，比如我现在需要的是size参数，e.target.files[0].size就可以拿到了,得到的单位是b哈

[C#] 纯文本查看 复制代码

File
lastModified:1478486422000
lastModifiedDate:Mon Nov 07 2016 10:40:22 GMT+0800 (CST)
name:"222.jpg"
size:124996
type:"image/jpeg"
webkitRelativePath:""
__proto__:File

})

继续加油，一步一步&#127385;

站长苏飞

验证图片大小，以及是否是正确的格式

[C#] 纯文本查看 复制代码

 var rw = new Vue({
            el: '#list',
            data() {
                return {
                    imgList: [],
                    size: 0,
                    extList: ["bmp", "gif", "jpeg", "png", "jpg"]
                }
            },
            methods: {
                fileClick() {
                    document.getElementById('upload_file').click()
                },
                fileChange(el) {
                    if (!el.target.files[0].size) return;
                    this.fileList(el.target.files);
                    el.target.value = ''
                },
                fileList(files) {
                    for (let i = 0; i < files.length; i++) {
                        this.fileAdd(files[i]);
                    }
                },
                fileAdd(file) {
                    if (rw.imgList.length > 299) {
                        return alert("超出图片数量最大限制！！！");
                    }
                    //验证是否为图片格式
                    if (rw.extList.indexOf(file.name.split('.')[1].toLowerCase()) < 1) {
                        return alert("不是支持的图片格式！！！");
                    }
                    this.size = this.size + file.size;//总大小
                    let reader = new FileReader();
                    reader.vue = this;
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        file.src = this.result;
                        this.vue.imgList.push({
                            file
                        });
                    }
                },
                fileDel(index) {
                    this.size = this.size - this.imgList[index].file.size;//总大小
                    this.imgList.splice(index, 1);
                },
                bytesToSize(bytes) {
                    if (bytes === 0) return '0 B';
                    let k = 1024, // or 1024
                        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                        i = Math.floor(Math.log(bytes) / Math.log(k));
                    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
                },
                dragenter(el) {
                    el.stopPropagation();
                    el.preventDefault();
                },
                dragover(el) {
                    el.stopPropagation();
                    el.preventDefault();
                },
                drop(el) {
                    el.stopPropagation();
                    el.preventDefault();
                    this.fileList(el.dataTransfer.files);
                }
            }
        })