Question

我想上传照片，我也想查看所有上传的照片。喜欢相册

Answer 1

您可以使用Jquery实现此目的。以下是上传图片代码段。一旦你完成它，然后我留给你设计相册结构...快乐编码....

两个步骤 1.上传＆amp;如果需要裁剪 2.显示上传的

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadCropShow.aspx.cs" Inherits="UploadCropShow" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>UploadCropShow</title>
</head>

<body>
  <form id="frmImage" runat="server">
  <div>
    <asp:Panel ID="pnlUpload" runat="server">
      <asp:FileUpload ID="Upload" runat="server" />
      <br />
      <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
      <asp:Label ID="lblError" runat="server" Visible="false" />
    </asp:Panel>

    <asp:Panel ID="pnlCrop" runat="server" Visible="false">
      <asp:Image ID="cropImage" runat="server" />
      <br />
      <asp:HiddenField ID="Hori" runat="server" />
      <asp:HiddenField ID="Verti" runat="server" />
      <asp:HiddenField ID="Width" runat="server" />
      <asp:HiddenField ID="Height" runat="server" />
      <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
    </asp:Panel>

    <asp:Panel ID="pnlCropped" runat="server" Visible="false">
      <asp:Image ID="imgCropped" runat="server" />
    </asp:Panel>
  </div>
  </form>
</body>
</html>

在这里，您需要使用Jquery和jcrop.js。所以在标签

下链接它们

<script type="text/javascript" src="script/jquery.Jcrop.pack.js"></script>
<script type="text/javascript" src="script/jquery.min.js"></script>

注意：我这里没有使用过样式。根据需要使用它们

编写此脚本标记以及html页面的一部分

    <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#cropImage').Jcrop({
      onSelect: performAction
    });
  });

  function performAction(c) {
    jQuery('#Hori').val(c.x);
    jQuery('#Verti').val(c.y);
    jQuery('#Width').val(c.w);
    jQuery('#Height').val(c.h);
  };
</script>

从您的aspx文件中，使用此文件进行上传注意：我没有检查有效的图像文件。只是快乐的道路逻辑

public void btnUpload_Click(object sender, EventArgs e)
{
    bool isFileSaved = false;
    string path = "C:\\Images\\..."; // Specify save path here...
    try
    {
      Upload.PostedFile.SaveAs(path);
      isFileSaved = true;
    }
    catch (Exception ex)
    {
      lblError.Text = "File could not be uploaded." + ex.ToString();
      lblError.Visible = true;
    }

  if (isFileSaved)
  {
    pnlUpload.Visible = false;
    pnlCrop.Visible = true;
    cropImage.ImageUrl = path;
  }
}

裁剪事件

public void btnCrop_Click(object sender, EventArgs e)
{
  int _width = Convert.ToInt32(Width.Value);
  int _height = Convert.ToInt32(Height.Value);
  int _hori = Convert.ToInt32(Hori.Value);
  int _verti = Convert.ToInt32(Verti.Value);
  string ImageName = path;

  byte[] ImageToCrop = ReSize(path + ImageName, _width, _height, _hori, _verti);
  using (MemoryStream ms = new MemoryStream(ImageToCrop, 0, ImageToCrop.Length))
  {
    ms.Write(ImageToCrop, 0, ImageToCrop.Length);
    using(SD.Image CroppedImage = SD.Image.FromStream(ms, true))
    {
      string saveTo = path + "crop" + ImageName;
      CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
      pnlCrop.Visible = false;
      pnlCropped.Visible = true;
      imgCropped.ImageUrl = "cropped image url" + ImageName;
    }
  }
}

你可能已经注意到ReSize方法调用就是这个。

static byte[] ReSize(string Img, int Width, int Height, int Hori, int Verti)
{
  try
  {
    using (SD.Image OriginalImage = SD.Image.FromFile(Img))
    {
      using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))
      {
        bmp.SetResolution(OriginalImage.HorizontalResolution,  OriginalImage.VerticalResolution);
        using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))
        {
          Graphic.SmoothingMode = SmoothingMode.AntiAlias;
          Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
          Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
          Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), Hori, Verti, Width, Height, SD.GraphicsUnit.Pixel);

          MemoryStream ms = new MemoryStream();
          bmp.Save(ms, OriginalImage.RawFormat);
          return ms.GetBuffer();
        }
      }
    }
  }
  catch (Exception ex)
  {
    //Handle ex here
  }
}

我需要一个上传照片的解决方案，我还要查看所有上传的照片？在asp.net c＃

1 个答案: