jQuery图像上传，如何在上传前验证图像尺寸答案

【问题标题】：jQuery image uploading, how do I validate image dimensions before uploadjQuery图像上传，如何在上传前验证图像尺寸
【发布时间】：2012-04-10 05:29:40
【问题描述】：

在上传之前，如何使用 jQuery 验证 宽度和高度

<form id="form1" runat="server">
    <asp:FileUpload id="FileUploadControl" runat="server" />
    <asp:Button runat="server" id="UploadButton" text="Upload" onclick="UploadButton_Click" />
    <br /><br />
    <asp:Label runat="server" id="StatusLabel" text="Upload status: " />
</form>

【问题讨论】：

问题出在哪里？
无法检查客户端上传的任何图像的高度和宽度。可能有一些 jQuery 插件，尝试用谷歌搜索它们，但这些插件的体积会很大。为避免页面大小问题，您必须在服务器端验证图像高度和宽度。如果你建议你会得到代码。
你能用简单的英语解释一下你需要什么吗？？？

标签： c# jquery asp.net jquery-ui

【解决方案1】：

无法在客户端验证待上传图片的宽度和高度。

但是上传后你可以在这个得到图片的宽度和高度：

var height = $("#Image").height()
var width = $("#Image").width()

【讨论】：

FileUpload 控件由 asp.net 而非 jquery 处理。
此外，您可以使用 javascript Image() 对象 - proglogic.com/learn/javascript/lesson10.php

【解决方案2】：

您可以使用 jquery uploadify 插件。

这是我为 asp.net 提供的示例代码

<script type="text/javascript">
   // <![CDATA[
   var id = "55";
   var theString = "asdf";
   $(document).ready(function() {
   $('#fileInput').uploadify({
   'uploader': 'uploadify/uploadify.swf',
   'script': 'Upload.ashx',
   'scriptData': { 'id': id, 'foo': theString},
   'cancelImg': 'uploadify/cancel.png',
   'auto': true,
   'multi': true,
   'fileDesc': 'Image Files',
   'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
   'queueSizeLimit': 90,
   'sizeLimit': 4000000,
   'buttonText': 'Choose Images',
   'folder': '/uploads',
   'onAllComplete': function(event, queueID, fileObj, response, data) {

   }
 });

});

那你要做一个Handler（.ashx）：

public class Upload : IHttpHandler, IRequiresSessionState
{

    public void ProcessRequest(HttpContext context)
    {
        try
        {
            HttpPostedFile file= context.Request.Files["Filedata"];

            int id = (Int32.Parse(context.Request["id"]));
            string foo = context.Request["foo"];
            file.SaveAs("C:\\" + id.ToString() + foo + file.FileName);

            context.Response.Write("1");
        }
        catch(Exception ex)
        {
            context.Response.Write("0");
        }
    }
}

【讨论】：

【解决方案3】：

你可以试试这个方法：

private void ButtonUpload_Click(object sender, System.EventArgs e)  {

    //Determine type and filename of uploaded image
    string UploadedImageType = UploadedPicture.PostedFile.ContentType.ToString().ToLower();
    string UploadedImageFileName = UploadedPicture.PostedFile.FileName;

    //Create an image object from the uploaded file
    System.Drawing.Image UploadedImage = System.Drawing.Image.FromStream(UploadedPicture.PostedFile.InputStream);

    //Determine width and height of uploaded image
    float UploadedImageWidth = UploadedImage.PhysicalDimension.Width;
    float UploadedImageHeight = UploadedImage.PhysicalDimension.Height;

    //Check that image does not exceed maximum dimension settings
    if (UploadedImageWidth > 600 || UploadedImageHeight > 400) {
            Response.Write("This image is too big - please resize it!");
    }

}

（或者）您可以尝试使用此uploader，您可以在用户上传之前确定常见的宽度和高度，这适用于 Chrome、Firefox 和 IE

【讨论】：

【解决方案4】：

服务器端（C#）；

using (System.Drawing.Image myImage = System.Drawing.Image.FromStream(FileUploadJcrop.PostedFile.InputStream))
{
    if (myImage.Width > 500)
    {
        Double d = (myImage.Height * 500) / myImage.Width;
        Int32 myH = (Int32)Math.Round(d, 0);
        Bitmap src = Bitmap.FromStream(FileUploadJcrop.PostedFile.InputStream) as Bitmap;
        Bitmap result = new Bitmap(500, myH);
        using (Graphics myg = Graphics.FromImage((System.Drawing.Image)result))
        {
            myg.DrawImage(src, 0, 0, 500, myH);
        }
        result.Save(savePath);
        FileSaved = true;
    }
}

【讨论】：