js判断图片上传时的文件大小，和宽高尺寸

lk20150415 发布于2019-08-20 15:24 / 1051人阅读

摘要：今天在做图片上传的小功能，使用了一个上传组件。很好奇它是如何在图片上传前，检测到图片的大小和尺寸的我们来写个小实例实现一下吧如何读取图片的首先，原生控件有个属性，该属性是一个数组。

今天在做图片上传的小功能，使用了一个kissy上传组件。很好奇它是如何在图片上传前，检测到图片的大小和尺寸的？我们来写个小实例实现一下吧
如何读取图片的size

首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图：

这样的话，我们就可以检测到size：

var fileData = file.files[0];
var size = fileData.size;   //注意，这里读到的是字节数
var isAllow = false;
var maxSize = Max_Size;
maxSize = maxSize * 1024;   //转化为字节
isAllow = size <= maxSize;

兼容性：ie9下读不到input file.files这个属性。思考：怎么办？
如何读取图片的width,height？
图片真实的宽度和高度，可以通过实例化Image对象、加载src 来获取。
兼容性：IE下使用滤镜来处理图片尺寸控制
全部代码：



    测试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82218.html

用Canvas实现h5移动端图片裁剪

摘要：前阵子七夕的时候搞了一个活动页，需要做一个本地图片的裁剪上传功能，用于生成一些特定的表白图片。还有就是是配合实现的，因为我是直接在项目中复制过来改改的，就懒得转换了图片读取要裁剪首先肯定就是读取图片文件。前阵子七夕的时候搞了一个h5活动页，需要做一个本地图片的裁剪上传功能，用于生成一些特定的表白图片。主要是用到了H5的FileApi 和 Canvas。个人感觉图片裁剪功能还是很实用的...

GitChat 2019-08-20 13:33 评论0 收藏0
JavaScript中的图片处理与合成(一)

摘要：中的图片处理与合成一引言图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。 JavaScript中的图片处理与合成(一) 引言：图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求，让我在这方面积累...

Charles 2019-08-22 15:01 评论0 收藏0