js判斷圖片上傳時的文件大小，和寬高尺寸

lk20150415 發布于2019-08-20 15:24 / 1126人閱讀

摘要：今天在做圖片上傳的小功能，使用了一個上傳組件。很好奇它是如何在圖片上傳前，檢測到圖片的大小和尺寸的我們來寫個小實例實現一下吧如何讀取圖片的首先，原生控件有個屬性，該屬性是一個數組。

今天在做圖片上傳的小功能，使用了一個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下使用濾鏡來處理圖片尺寸控制
全部代碼：



    測試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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