将处理后的图像上传到服务器答案

【问题标题】：upload a processed image into server将处理后的图像上传到服务器
【发布时间】：2012-09-13 08:38:52
【问题描述】：

我正在使用 imageFX 处理上传的图像并在处理到我的服务器后将其保存 imageFX 是一个 javascript 库，可将图像转换为已处理的画布我想要做的是获取该画布并将其上传到我的服务器使用 AJAX 但我收到错误响应这是我的代码：

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/pixastic/pixastic.core.js" type="text/javascript"></script>
<script src="Scripts/pixastic/desaturate.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#save").click(function () {

            var image = document.getElementById("filterimage").toDataURL("image/png");
            image = image.replace('data:image/png;base64,', '');
            alert(image);
            $.ajax({
                type: 'POST',
                url: "ImageFxExample.aspx/UploadImage",
                data: '{ "imageData" : "' + image + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert('Image saved successfully !');
                },
                error: function () {
                    alert("error!!");
                }
            });
        });

    });
   </script>
 <script type="text/javascript">

     function strfilter(filter) {
         var img = document.getElementById("<%=filterimage.ClientID %>");
         Pixastic.process(img, filter);
         document.getElementById("save").style.display = "block";
     }
   </script>

标记：

    <asp:FileUpload ID="fileUpload" runat="server"   />
    <asp:Button ID="upload_btn" runat="server" onclick="upload_btn_Click" Text="upload" />
    <asp:Image ID="filterimage" runat="server" ImageUrl="" />

服务器端：

protected void upload_btn_Click(object sender, EventArgs e){
    string folderPath = "UploadedImage/";
    string imageName = fileUpload.FileName;
    string saveLocation = Server.MapPath(folderPath) + imageName;
    fileUpload.SaveAs(saveLocation);
    filterimage.ImageUrl = folderPath + imageName;
}

[WebMethod()]
public static void UploadImage(string imageData){
    string Path = "UploadedImage/";
    string folderPath = HttpContext.Current.Server.MapPath(Path);
    string fileNameWitPath = folderPath + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";

    FileStream fs = new FileStream(fileNameWitPath, FileMode.Create);
    BinaryWriter bw = new BinaryWriter(fs);

    byte[] data = Convert.FromBase64String(imageData);

    bw.Write(data);
    bw.Close();
}

如果我在不使用上传的情况下为 filterimage 放置一个简单的 imageUrl，它可以正常工作，但如果我使用上传控件，它将无法正常工作，并且我会收到错误消息，请提供任何帮助

【问题讨论】：

一般建议 Jquery 1.4.1 太旧..尝试更新
我想我找到了解决方案，我正在上传不包含 png 扩展名的图像
请使用一些标点符号，因为这样你的问题真的很难阅读。当您找到适合自己的答案时，只需将其作为答案发布并接受 - 这样其他有相同问题的人更容易获得帮助

标签： c# javascript ajax

【解决方案1】：

我找到了正确的答案，它正在将图像转换为“png”b4 你上传它

protected void upload_btn_Click(object sender, EventArgs e)
{
    string folderPath = "UploadedImage/";
    string  imageName = fileUpload.FileName;

    string saveLocation = Server.MapPath(folderPath);
    string ext = Path.GetExtension(imageName);
   string name= imageName.Replace(ext, ".png");
   saveLocation = Server.MapPath(folderPath) + name;
    fileUpload.SaveAs(saveLocation);
    filterimage.ImageUrl = folderPath + name;
}

【讨论】：