jQuery + webforms: ligue para um ashx e atualize uma imagem como resultado

Question

Considere uma página do ASP.NET usando a biblioteca jQuery Carregar.

Aqui está a sequência de eventos na página ASP.NET WebForms:

1. O usuário clica em um controle de upload de arquivo. HTML antigo e simples <input type="file" />
2. O usuário escolhe um arquivo de imagem de seu sistema usando uma caixa de diálogo Browse. Tudo funcionando bem.
3. Um evento jQuery dispara. Ele chama um ASHX que envia corretamente conforme o esperado.
4. Agora que o arquivo é carregado, Como posso mudar um <asp:image> na página de chamadas .aspx? Realmente gostaria de fazer isso sem um postback!

Aqui está o código!

<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>

Pergunta:

Como você implementaria a mudança do <asp:image> Para refletir a imagem que o usuário acabou de enviar?

Essa pergunta realmente não deve estar relacionada à biblioteca de upload, mas sim como reagir ao retorno/final da execução de um .ashx? Isso deve ser feito em outro método jQuery

Answer 1

Você definitivamente pode fazer isso sem fazer um postback. Tudo o que você precisa é obter o caminho da imagem carregada. A partir de Uploadify documentação eu acho que você pode obter caminho de fileObj propriedade ou devolva -o do servidor em response property:

FileObj: Um objeto que contém detalhes sobre o arquivo que foi selecionado.

• nome - O nome do arquivo
• caminho de arquivo - O caminho no servidor para o arquivo carregado
• Tamanho - O tamanho em bytes do arquivo
• data de criação - a data em que o arquivo foi criado
• modificação de data - A última data em que o arquivo foi modificado
• modelo - A extensão do arquivo começando com um '.'

resposta: Os dados enviados de volta do servidor.

Agora, se sua imagem ASPX é como:

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

Você pode defini -lo o seguinte:

 //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);
 }