我有一个JPS,其中用户可以在其中放置图像:
<div class="photo"> <div>Photo (max 240x240 and 100 kb):</div> <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/> </div>
我写了这个js:
function checkPhoto(target) { if(target.files[0].type.indexOf("image") == -1) { document.getElementById("photoLabel").innerHTML = "File not supported"; return false; } if(target.files[0].size > 102400) { document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)"; return false; } document.getElementById("photoLabel").innerHTML = ""; return true; }
可以很好地检查文件类型和大小。现在,我想检查图像的宽度和高度,但是我不能这样做。 我已经尝试过,target.files[0].width但是我得到了undefined。用其他方式我得到0。 有什么建议?
target.files[0].width
undefined
0
该文件只是一个文件,您需要像这样创建一个图像:
var _URL = window.URL || window.webkitURL; $("#file").change(function (e) { var file, img; if ((file = this.files[0])) { img = new Image(); var objectUrl = _URL.createObjectURL(file); img.onload = function () { alert(this.width + " " + this.height); _URL.revokeObjectURL(objectUrl); }; img.src = objectUrl; } });
我认为您意识到只有少数浏览器支持此功能。到现在为止,大多数都是Firefox和Chrome,也可以成为歌剧。
PSURL.createObjectURL()方法已从MediaStream接口中删除。该方法已在2013年弃用,并通过将流分配给HTMLMediaElement.srcObject来取代。删除了旧方法,因为它不太安全,需要调用URL.revokeOjbectURL()才能结束流。其他用户代理已弃用(Firefox)或已删除(Safari)此功能。