jQuery + webforms:llame a un ashx, y la actualización de una imagen como un resultado

Question

Considere la posibilidad de un ASP.NET la página utiliza la biblioteca jQuery Uploadify.

Esta es la secuencia de eventos en el ASP.NET formularios de la página:

1. El usuario hace clic en un archivo de control de carga.El viejo y simple de HTML <input type="file" />
2. Usuario selecciona un archivo de imagen desde su sistema mediante un cuadro de diálogo Examinar.Todos los que trabajan bien.
3. JQuery, se dispara el evento.Llama a un ashx que correctamente para la carga como se esperaba.
4. Ahora que el archivo está subido, ¿cómo puedo cambiar un <asp:image> en la convocatoria .página aspx?Realmente me gustaría hacer esto sin una devolución de datos!

Aquí está el 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>

Pregunta:

¿Cómo implementar el cambio de la <asp:image> para reflejar la imagen que el usuario acaba de cargar?

Esta pregunta en realidad no debería estar relacionado con la carga de la biblioteca, sino más bien, cómo reaccionar frente a la devolución/fin de la realización de una .ashx?Si esto se hace en otro método jQuery

Answer 1

Definitivamente, usted puede hacer esto sin necesidad de hacer una devolución de datos.Todo lo que necesitas es obtener la ruta de la imagen subida.De Uploadify documentación que yo creo que se puede obtener la ruta de fileObj de la propiedad, o se devuelven desde el servidor response property:

fileObj:Un objeto que contiene información sobre el archivo que se ha seleccionado.

• nombre – El nombre del archivo
• filePath – La ruta de acceso en el servidor para el archivo subido
• tamaño – El tamaño en bytes del archivo
• campos creationdate – La fecha en que se creó el archivo
• modificationDate – La última fecha en que el archivo fue modificado
• tipo de – La extensión de los archivos que comienzan con un '.'

respuesta:Los datos que les envían desde el servidor.

Ahora si tu aspx imagen es como:

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

se puede establecer como sigue:

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