如何在將圖像保存到數據庫之前驗證圖像大小和尺寸

我使用的是ASP.NET C＃4.0，我的web表單由輸入類型文件組成，用於上傳圖像。如何在將圖像保存到數據庫之前驗證圖像大小和尺寸

我需要驗證客戶端上的圖像，將其保存到我的SQL數據庫

，因爲我使用的輸入類型之前=文件上傳圖片，我不想回發的頁面用於驗證圖像尺寸，尺寸。

需要您提供幫助感謝

2011-10-15 Murtaza

如果你想在客戶端做到這一點，那麼爲什麼你用c＃asp.net標籤。你應該使用javascript或jquery – rahularyansharma

來標記這個，你可以使用這個URL http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – rahularyansharma

好的謝謝你指導我會保持這個爲我的進一步職位 – Murtaza

你可以做這樣的事情...

你可以做到這一點對從W3C支持新File API瀏覽器，使用上的readAsDataURL功能FileReader接口並將數據URL分配給img的src（之後您可以閱讀圖像的height和width）。目前Firefox 3.6支持File API，並且我認爲Chrome和Safari已經或即將實現。

所以在過渡階段你的邏輯是這樣的：

檢測瀏覽器是否支持文件API（這是很容易：if (typeof window.FileReader === 'function')）。
如果確實如此，那麼請在本地讀取數據並將其插入圖像以查找尺寸。
如果沒有，請將文件上傳到服務器（可能會從iframe提交表單以避免離開頁面），然後輪詢服務器詢問圖像的大小（或者只是詢問上傳的圖像，if你比較喜歡）。

編輯我一直工作了文件API一段時間的一個例子。這裏有一個：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<title>Show Image Dimensions Locally</title> 
<style type='text/css'> 
body { 
    font-family: sans-serif; 
} 
</style> 
<script type='text/javascript'> 

    function loadImage() { 
     var input, file, fr, img; 

     if (typeof window.FileReader !== 'function') { 
      write("The file API isn't supported on this browser yet."); 
      return; 
     } 

     input = document.getElementById('imgfile'); 
     if (!input) { 
      write("Um, couldn't find the imgfile element."); 
     } 
     else if (!input.files) { 
      write("This browser doesn't seem to support the `files` property of file inputs."); 
     } 
     else if (!input.files[0]) { 
      write("Please select a file before clicking 'Load'"); 
     } 
     else { 
      file = input.files[0]; 
      fr = new FileReader(); 
      fr.onload = createImage; 
      fr.readAsDataURL(file); 
     } 

     function createImage() { 
      img = document.createElement('img'); 
      img.onload = imageLoaded; 
      img.style.display = 'none'; // If you don't want it showing 
      img.src = fr.result; 
      document.body.appendChild(img); 
     } 

     function imageLoaded() { 
      write(img.width + "x" + img.height); 
      // This next bit removes the image, which is obviously optional -- perhaps you want 
      // to do something with it! 
      img.parentNode.removeChild(img); 
      img = undefined; 
     } 

     function write(msg) { 
      var p = document.createElement('p'); 
      p.innerHTML = msg; 
      document.body.appendChild(p); 
     } 
    } 

</script> 
</head> 
<body> 
<form action='#' onsubmit="return false;"> 
<input type='file' id='imgfile'> 
<input type='button' id='btnLoad' value='Load' onclick='loadImage();'> 
</form> 
</body> 
</html>

在Firefox 3.6中很有效。我避免在那裏使用任何庫，所以對屬性（DOM0）風格的事件處理程序等抱有歉意。

來源

2011-10-15 07:12:28

謝謝！我會找到一種替代方法使其在所有瀏覽器中都能正常工作，您的回答很有幫助，但需要瀏覽器兼容性。 – Murtaza

function getImgSize(imgSrc) { 
    var newImg = new Image(); 

    newImg.onload = function() { 
    var height = newImg.height; 
    var width = newImg.width; 
    alert ('The image size is '+width+'*'+height); 
    } 

    newImg.src = imgSrc; // this must be done AFTER setting onload 

}

來源

2011-10-15 07:03:21

上面的代碼不工作，請你詳細解釋，所以我們正確實施。謝謝 – Murtaza

如何在將圖像保存到數據庫之前驗證圖像大小和尺寸

回答

相關問題