Jcrop仅适用于表单标记

时间:2015-04-05 06:07:40

标签: javascript asp.net jcrop

我现在已经敲了近三天了。以下代码在没有MASTERPAGE的情况下工作很好。但是当我复制粘贴整个主页上的东西(它有一个主页)时,它不起作用并且给出了错误"输入字符串格式不正确"。

我想这段代码只有在我将其包含在表单标记中时才能生效,但我不能在contentplaceholder中使用表单标记。我可以解决这个问题吗?

btnUpload工作正常,但是当我点击btnCrop时会弹出错误。 html如下:

  <form id="form1" runat="server">
 <div style="width: 540px" runat="server">
        <fieldset>
        <legend>Upload, crop and save image in asp.net</legend>
        <table>
            <tr>
                <td>
                    Select image to upload :
                </td>
                <td>
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                </td>
                <td>
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <asp:Image ID="imgCropped" Width="172px" Height="172px" runat="server" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <asp:Label ID="lblMsg" runat="server" ForeColor="Red" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <asp:Button ID="btnReset" runat="server" Text="Reset" Visible="false" OnClick="btnReset_Click" />
                </td>
            </tr>
        </table>
        <asp:Panel ID="pnlCrop" runat="server" Visible="false">
            <table>
                <tr>
                    <td>
                        <asp:Image ID="imgToCrop" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnCrop" runat="server" Text="Crop & Save" OnClick="btnCrop_Click" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="XCoordinate" type="hidden" runat="server" />
                        <input id="YCoordinate" type="hidden" runat="server" />
                        <input id="Width" type="hidden" runat="server" />
                        <input id="Height" type="hidden" runat="server" />
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </fieldset>
    </div>
    </form>

如有必要,代码如下:

    protected void btnUpload_Click(object sender, EventArgs e)
{
    string fileName = string.Empty;
    string filePath = string.Empty;
    string extension = string.Empty;
    try
    {
        //Check if Fileupload control has file in it
        if (FileUpload1.HasFile)
        {
            // Get selected image extension
            extension = Path.GetExtension(FileUpload1.FileName).ToLower();
            //Check image is of valid type or not
            if (extension == ".jpg" || extension == ".jpeg" || extension == ".png" || extension == ".gif" || extension == ".bmp")
            {
                //Cretae unique name for the file
                fileName = Guid.NewGuid().ToString() + extension;
                //Create path for the image to store
                filePath = Path.Combine(Server.MapPath("/Images"), fileName);
                //Save image in folder
                FileUpload1.SaveAs(filePath);
                //Show the panel and load the uploaded image in image control.
                pnlCrop.Visible = true;
                imgToCrop.ImageUrl = "/Images/" + fileName;
            }
            else
            {
                lblMsg.Text = "Please select jpg, jpeg, png, gif or bmp file only";
            }
        }
        else
        {
            lblMsg.Text = "Please select file to upload";
        }
    }
    catch (Exception ex)
    {
        lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
    }
    finally
    {
        extension = string.Empty;
        fileName = string.Empty;
        filePath = string.Empty;
    }
}

protected void btnCrop_Click(object sender, EventArgs e)
{
    string croppedFileName = string.Empty;
    string croppedFilePath = string.Empty;
    //get uploaded image name
    string fileName = Path.GetFileName(imgToCrop.ImageUrl);
    //get uploaded image path
    string filePath = Path.Combine(Server.MapPath("~/Images"), fileName);

    //Check if file exists on the path i.e. in the UploadedImages folder.
    if (File.Exists(filePath))
    {
        //Get the image from UploadedImages folder.
        System.Drawing.Image orgImg = System.Drawing.Image.FromFile(filePath);
        //Get user selected cropped area
        //Convert.ToInt32(String.Format("{0:0.##}", YCoordinate.Value)),

        Rectangle areaToCrop = new Rectangle(
            Convert.ToInt32(XCoordinate.Value),
            Convert.ToInt32(YCoordinate.Value),
            Convert.ToInt32(Width.Value),
            Convert.ToInt32(Height.Value));
        try
        {

            Bitmap bitMap = new Bitmap(areaToCrop.Width, areaToCrop.Height);
            //Create graphics object for alteration
            using (Graphics g = Graphics.FromImage(bitMap))
            {
                //Draw image to screen
                g.DrawImage(orgImg, new Rectangle(0, 0, bitMap.Width, bitMap.Height), areaToCrop, GraphicsUnit.Pixel);
            }

            //name the cropped image
            croppedFileName = "crop_" + fileName;
            //Create path to store the cropped image
            croppedFilePath = Path.Combine(Server.MapPath("~/Images"), croppedFileName);
            //save cropped image in folder
            bitMap.Save(croppedFilePath);
            orgImg.Dispose();
            bitMap = null;
            //Now you can delete the original uploaded image from folder                
            File.Delete(filePath);
            //Hide the panel
            pnlCrop.Visible = false;
            //Show success message in label
            lblMsg.ForeColor = Color.Green;
            lblMsg.Text = "Image cropped and saved successfully";

            //Show cropped image
            imgCropped.ImageUrl = "~/Images/" + croppedFileName;
            string CS = ConfigurationManager.ConnectionStrings["SportsActiveConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(CS))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("spLogo", con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@LogoPath", "Images/" + croppedFileName);
                cmd.ExecuteNonQuery();
            }
            //Show Reset button
            btnReset.Visible = true;
        }
        catch (Exception ex)
        {
            lblMsg.Text = "Oops!! error occured : " + ex.Message.ToString();
        }
        finally
        {
            fileName = string.Empty;
            filePath = string.Empty;
            croppedFileName = string.Empty;
            croppedFilePath = string.Empty;
        }
    }

}

2 个答案:

答案 0 :(得分:0)

您的错误原因是从XCoordinate.ValueXCoordinate.Value等值转换为integer。在进行可能在提供的字符串中具有非整数值的转换时,您应该小心。

使用TryParse代替: -

int xCoordinate;
if(int.TryParse(XCoordinate.Value,out xCoordinate)
      //your code

修改 如果转换从字符串转换为整数,则会发生此错误,如果转换成功,则TryParse方法将返回true,否则为false,如果转换成功,则将转换后的值分配给我们在方法(xCoordinate中传递的输出变量这种情况)。

int xCoordinate,yCoordinate,width,height;
if(int.TryParse(XCoordinate.Value,out xCoordinate) && 
    int.TryParse(YCoordinate.Value,out yCoordinate) &&
    int.TryParse(Width.Value,out width) && int.TryParse(Height.Value,out height))
{
     Rectangle areaToCrop = new Rectangle(xCoordinate,yCoordinate,width,height)
}
else
{
     //Throw error, use any default values etc.
}

答案 1 :(得分:0)

当您将带有身份input的aspx XCoordinate集成到母版页中时,输入的ID会从XCoordinate更改为ContentPlaceHolder1_XCoordinate。由于这个问题,隐藏的输入没有值,因此你的后端代码无法将空字符串解析为Int。

尝试将脚本替换为:

    jQuery(document).ready(function () {
        jQuery('#<%= imgToCrop.ClientID %>').Jcrop({
            onSelect: updateCoords
        });
    });

    function updateCoords(c) {
        jQuery('#<%= XCoordinate.ClientID %>').val(c.x);
        jQuery('#<%= YCoordinate.ClientID %>').val(c.y);
        jQuery('#<%= Width.ClientID %>').val(c.w);
        jQuery('#<%= Height.ClientID %>').val(c.h);
    };