jQuery + веб-формы: вызовите аш и обновите изображение в результате - PullRequest
Новая
       19

jQuery + веб-формы: вызовите аш и обновите изображение в результате

1 голос
/ 06 октября 2009

Рассмотрим страницу ASP.NET с использованием библиотеки jQuery Uploadify .

Вот последовательность событий на странице веб-форм ASP.NET:

  1. Пользователь нажимает на элемент управления загрузкой файлов. Простой старый HTML <input type="file" />
  2. Пользователь выбирает файл изображения из своей системы с помощью диалога Обзор. Все работает нормально.
  3. Происходит событие jQuery. Он вызывает Ashx, который правильно загружает, как ожидалось.
  4. Теперь, когда файл загружен, как я могу изменить <asp:image> на странице вызова .aspx ? Очень бы хотел сделать это без обратной передачи!

Вот код! 

<asp:Image ID="imgChangeMe" runat="server" /><br />
<input type="file" name="uploadify" id="uploadify" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#uploadify").uploadify({
        'uploader'       : 'scripts/uploadify/uploadify.swf',
    'script'         : 'uploadify.ashx',
    'folder'         : 'uploads',
    'queueID'        : 'fileQueue',
    'auto'           : true,
    'multi'          : true
        });
       });
 </script>

Вопрос:

Как бы вы реализовали изменение <asp:image> для отображения изображения, которое пользователь только что загрузил?

Этот вопрос действительно не должен быть связан с загружаемой библиотекой, а как реагировать на возврат / завершение выполнения .ashx? Должно ли это быть сделано в другом методе jQuery

1 Ответ

2 голосов
/ 06 октября 2009

Вы определенно можете сделать это без обратной передачи. Все, что вам нужно, это получить путь к загруженному изображению. Из документации Uploadify я думаю, что вы можете получить путь из свойства fileObj или вернуть его с сервера в response property:

fileObj : Объект, содержащий подробную информацию о выбранном файле.

  • name - Имя файла
  • filePath - Путь на сервере к загруженному файлу
  • размер - размер в байтах файла
  • creationDate - Дата создания файла
  • modifyDate - Дата последнего изменения файла
  • type - Расширение файла, начинающееся с ‘.’

ответ : данные, отправленные обратно с сервера.

Теперь, если ваш aspx-образ имеет вид: 

<aspx:image id="myImage"...../>

Вы можете установить его следующим образом: 

 //Uploadify hookup

 'onComplete': function(evt, qid, fObj, res){
     var f = fObj.filePath + fObj.name; //PUT SLASH IF REQUIRED BETWEEN
     $("img[id$='myImage']").attr("src",f);

     //for future readers who might be using master pages.
     $('#<%=myImage.ClientID %>').attr("src", f);
     $('#<%=txtMyImgPath.ClientID %>').val(f);
 }
...