Question

请帮我解决上传图片并在客户端显示的问题。同时，我需要将图像保存在服务器中而不刷新整个页面，因为其他控件是使用java脚本动态创建的，当整个页面刷新时它将消失。

找到解决方案：

<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5">
<ItemTemplate>    
<div id="divImage" runat="server" onclick="Test()" class="draggable">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server" />
</div>
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/MyImages/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>

protected void BindDataList()
{
    DirectoryInfo dir = new DirectoryInfo(MapPath("MyImages"));
    FileInfo[] files = dir.GetFiles();
    ArrayList listItems = new ArrayList();
    foreach (FileInfo info in files)
    {
    listItems.Add(info);
    }
    dtlist.DataSource = listItems;
    dtlist.DataBind();

}

Answer 1

您需要使用Ajax。

Answer 2

最简单的解决方案可能是在页面内使用包含表单的iframe。提交表单时，只会刷新iframe而不是整个页面

否则您可以通过ajax将图像的base64表示发送到服务器。这可以在较新的浏览器中实现，将图片加载到<canvas>元素中并使用toDataURL()方法（请参阅Get image data in JavaScript?）

Answer 3

查看http://www.phpletter.com/Our-Projects/AjaxFileUpload/

Answer 4

您可以使用ajax发送所需的图片，

首先获取图像数据：

var Pic = document.getElementById（“myCanvas”）。toDataURL（“image / png”）;

并通过ajax将其发送到服务器：

$.ajax({
        type: 'POST',
        url: 'Save_Picture.aspx/UploadPic',
        data: '{ "imageData" : "' + Pic + '" }',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert("Done, Picture Uploaded.");
        }
    });

并在服务器“Save_Picture.aspx / UploadPic”上编写服务以读取图像数据：

byte [] data = Convert.FromBase64String（imageData）;

如何在不刷新整个页面的情况下将图像上载并保存到服务器中

4 个答案: