0
好吧,所以我想在jQuery上傳預覽之前做一個最大高度最大寬度驗證,以便如果圖像大於最大高度或最大寬度以提醒用戶並詢問他們選擇一張較小的照片。我將如何能夠完成這部分代碼?jquery上傳預覽之前的最大高度和最大寬度驗證
的html代碼:
<img id="uploadPreview" style="display:none;"/>
<!-- image uploading form -->
<form action="upload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/jpeg" name="image" />
<input type="submit" value="Upload">
<!-- hidden inputs -->
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>
jQuery代碼:
function setInfo(i, e) {
$('#x').val(e.x1);
$('#y').val(e.y1);
$('#w').val(e.width);
$('#h').val(e.height);
}
$(document).ready(function() {
var p = $("#uploadPreview");
// prepare instant preview
$("#uploadImage").change(function(){
// fadeOut or hide preview
p.fadeOut();
// prepare HTML5 FileReader
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
p.attr('src', oFREvent.target.result).fadeIn();
};
});
// implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
$('img#uploadPreview').imgAreaSelect({
// set crop ratio (optional)
aspectRatio: '1:1',
onSelectEnd: setInfo
});
});
你嘗試過什麼?一旦你已經把圖像元素放入DOM並且它已經加載,那麼問題出在哪裏,你只要檢查它的寬度和高度...... – CBroe
@CBroe我試過把它放在maxHeight:1100,maxWidth:1100但是那沒用,那就是我所有的因爲我不太瞭解jQuery或JavaScript – ThinkkSo