个人中心
gpt4 book ai didi

javascript - 如何在将图像保存到数据库之前验证图像大小和尺寸

转载 作者：行者123 更新时间：2023-11-28 16:26:42 26 4
gpt4 key购买 nike

我使用的是 ASP.NET C# 4.0，我的 Web 表单包含用于上传图像的输入类型文件。

我需要在客户端验证图像，然后再将其保存到我的 SQL 数据库

由于我使用输入类型=文件上传图像，因此我不想回发页面来验证图像大小、尺寸。

需要您的帮助谢谢

最佳答案

你可以做这样的事情......

您可以在支持新 File API 的浏览器上执行此操作来自 W3C，使用 readAsDataURL FileReader 接口(interface)上的函数，并将数据 URL 分配给 img 的 src(之后您可以读取 height 和图像的宽度)。目前 Firefox 3.6 支持 File API，我认为 Chrome 和 Safari 已经支持或即将支持。

所以你在过渡阶段的逻辑将是这样的:

  1. 检测浏览器是否支持 File API(这很简单:if (typeof window.FileReader === 'function'))。

  2. 如果是，那就太好了，在本地读取数据并将其插入图像中以查找尺寸。

  3. 如果没有，请将文件上传到服务器(可能从 iframe 提交表单以避免离开页面)，然后轮询服务器询问图像有多大(或者只是询问上传的图像，如果您愿意的话)。

编辑 一段时间以来，我一直想编写一个文件 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) 样式事件处理程序等表示歉意。

关于javascript - 如何在将图像保存到数据库之前验证图像大小和尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7776327/

26 4 0
文章推荐： javascript - 如何验证 ASP.Net TextBox 是否允许具有三位小数的负或正小数值？
文章推荐： php - 无法显示文档文件
文章推荐： javascript - 尝试将两个数字相加，但它们被包含在 span 标签中
文章推荐： jquery - 在同一行对齐元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com