Как загрузить и сохранить изображение на сервере без обновления всей страницы

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

Наиболее тривиальное решение, возможно, использует iframe, содержащий форму, внутри страницы. При отправке формы будет обновляться только iframe, а не целая страница

В противном случае вы могли бы отправить представление изображения base64 вашего изображения на ваш сервер с помощью ajax. Это может быть достигнуто в новый браузер, загрузка изображения в <canvas> элемента и используя toDataURL() метод (см Get image data in JavaScript?)

Answer 2

Вам нужно будет использовать Ajax для этого.

Answer 3

Заканчивать http://www.phpletter.com/Our-Projects/AjaxFileUpload/

Answer 4

Вы можете использовать AJAX для отправки изображений (ы) вы хотите,

сначала получить данные изображения:.

вар Pic = document.getElementById ("myCanvas") toDataURL ("изображение/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" читать данные изображения:

байт [ ] data = Convert.FromBase64String (imageData);