jquery上传预览之前的最大高度和最大宽度验证

好吧，所以我想在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 
    }); 
});

来源

2013-10-04 ThinkkSo

你尝试过什么？一旦你已经把图像元素放入DOM并且它已经加载，那么问题出在哪里，你只要检查它的宽度和高度...... – CBroe

@CBroe我试过把它放在maxHeight：1100，maxWidth：1100但是那没用，那就是我所有的因为我不太了解jQuery或JavaScript – ThinkkSo

只是

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() { 
     var that=this; 
     // fadeOut or hide preview 
     p.fadeOut(); 
     // prepare HTML5 FileReader 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
     oFReader.onload = function (oFREvent) { 
      var image = new Image(); 
      image.src = oFREvent.target.result; 
      image.onload = function() { 
       if ((this.width > 400) && (this.height)) { 
        that.value=""; 
        alert("choose another file"); 
       } 
       else { 
        p.attr('src', oFREvent.target.result).fadeIn(); 
       } 
       // access image size here & do further implementation 
      }; 
     }; 
    }); 
    // implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/) 
    $('img#uploadPreview').imgAreaSelect({ 
     // set crop ratio (optional) 
     aspectRatio: '1:1', 
     onSelectEnd: setInfo, 
     maxHeight: 100, 
     maxWidth: 100 
    }); 
});

这将有助于取代你的script.js ..

来源

2013-10-04 09:01:06 Rayon

jquery上传预览之前的最大高度和最大宽度验证

回答

相关问题