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

Question

Я уже давно безуспешно пытаюсь это сделать.

Использование элемента управления asyncfileupload для загрузки файла и отображения изображения.Загрузка работает нормально, и изображение отображается, если я перезагружаю / обновляю страницу.

Но нужно знать, как это можно сделать без перезагрузки / обновления страницы.

После прочтения сообщений в Интернетесм. рекомендацию использовать скриптменеджер, но у меня это не работает:

    protected void FileUploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {

          .
          .
          .
          .

        ScriptManager.RegisterStartupScript(this, GetType(), "TestAlert",
        "window.parent.document.getElementById('" + img_ProfilePic.ClientID + "').src='" + "http://www.site.com/default.jpg" + "');",
        true); 

}

Спасибо, Бехруз

Answer 1

Потратив несколько часов на обнаружение ошибки, упомянутой user554134, я пришел к следующему решению, использующему jQuery (вместе с элементом управления asyncfileupload).

• Сначала получите скомпилированную версию AjaxToolkit, в котором исправлена ​​ошибка, за ссылку пользователя 554134.

• Добавьте jQuery, чтобы скрыть / показать изображение.

$(document).ready(function () {
            $("#imgConfirmation").hide();
        });

Ключевым моментом, который следует помнить, является то, что элемент управления AsyncFileUpload использует iframe, поэтому вам необходимо иметь jquery доступ к родительскому элементу фрейма при вызове вашей функции "show". Например:

        function showImage(imagePath) {
            $('#imgConfirmation', window.parent.document).attr("src", imagePath);
            $('#imgConfirmation', window.parent.document).show();
        }

• В вашем событии UploadedComplete после сохранения файла зарегистрируйте клиентский скрипт для подключения к функции js. Например,

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('" + myLink + "');", true);

Answer 2

Через несколько дней, верно, несколько дней отладки, я обнаружил, что это ошибка:

http://ajaxcontroltoolkit.codeplex.com/workitem/26761

Надеюсь, это спасет других людей.

Answer 3

Проверьте эту ссылку, я думаю, что она полезна для вас

http://www.aspsnippets.com/Articles/Display-image-after-upload-without-page-refresh-or-postback-using-ASP.Net-AsyncFileUpload-Control.aspx

Answer 4

Вы можете проверить JS в вашем ScriptManager. Похоже, в конце строки JavaScript у вас может быть дополнительный символ ")", что может привести к вашей ошибке.

Если у вас все еще есть проблемы, следующая ссылка должна указать вам правильное направление для использования AsyncFileUpload с UpdatePanel
http://forums.asp.net/t/1479689.aspx?PageIndex=2

Answer 5

Используемый код:

Код загрузки и отображения

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 

{ 

string strPath = MapPath("~/upload/") + Path.GetFileName(e.FileName); 

AsyncFileUpload1.SaveAs(strPath); 

displayImage.ImageUrl = strPath; 

} 

Необходимо добавить следующее в JavaScript на стороне клиента.

<script type="text/javascript"> 

function uploadComplete(sender, args) { 

var imageName = args.get_fileName(); 

$get("displayImage").src = "./upload/" + imageName; 

} 

</script> 

Элемент управления для использования AsyncFileUpload:

Деталь: https://code.msdn.microsoft.com/How-to-upload-an-image-and-c3703a2c