我使用的是ASP.NET C#4.0,我的web表单由输入类型文件组成,用于上传图像。如何在将图像保存到数据库之前验证图像大小和尺寸
我需要验证客户端上的图像,将其保存到我的SQL数据库
,因为我使用的输入类型之前=文件上传图片,我不想回发的页面用于验证图像尺寸,尺寸。
需要您提供帮助 感谢
我使用的是ASP.NET C#4.0,我的web表单由输入类型文件组成,用于上传图像。如何在将图像保存到数据库之前验证图像大小和尺寸
我需要验证客户端上的图像,将其保存到我的SQL数据库
,因为我使用的输入类型之前=文件上传图片,我不想回发的页面用于验证图像尺寸,尺寸。
需要您提供帮助 感谢
你可以做这样的事情...
你可以做到这一点对从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)风格的事件处理程序等抱有歉意。
谢谢!我会找到一种替代方法使其在所有浏览器中都能正常工作,您的回答很有帮助,但需要浏览器兼容性。 – 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
}
上面的代码不工作,请你详细解释,所以我们正确实施。谢谢 – Murtaza
如果你想在客户端做到这一点,那么为什么你用c#asp.net标签。你应该使用javascript或jquery – rahularyansharma
来标记这个,你可以使用这个URL http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – rahularyansharma
好的谢谢你指导我会保持这个为我的进一步职位 – Murtaza