jQuery + WebForms : ASHX를 호출하고 결과적으로 이미지를 새로 고치십시오.

Question

jQuery 라이브러리를 사용하여 ASP.NET 페이지를 고려하십시오 업로드.

ASP.NET WebForms 페이지의 일련의 이벤트는 다음과 같습니다.

1. 사용자는 파일 업로드 제어를 클릭합니다. 평범한 오래된 HTML <input type="file" />
2. 사용자는 브라우징 대화 상자를 사용하여 시스템에서 이미지 파일을 선택합니다. 모두 잘 작동합니다.
3. jQuery 이벤트가 발생합니다. 예상대로 올바르게 업로드하는 ASHX를 호출합니다.
4. 이제 파일이 업로드되었으므로 어떻게 변경할 수 있습니까? <asp:image> .aspx 페이지에서? Postback 없이이 작업을 정말로하고 싶습니다!

코드는 다음과 같습니다!

<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 방법으로 수행해야합니다

Answer 1

포스트백을 만들지 않고도 확실히 할 수 있습니다. 업로드 된 이미지의 경로를 얻는 것입니다. 에서 Uploadify 문서 나는 당신이 길을 갈 수 있다고 생각합니다 fileObj 속성 또는 서버에서 반환하십시오 response property:

FileObj: 선택한 파일에 대한 세부 정보가 포함 된 개체.

• 이름 - 파일의 이름
• 파일 경로 - 업로드 된 파일로의 서버의 경로
• 크기 - 파일의 바이트 크기
• 제작 일 - 파일이 생성 된 날짜
• modificationDate - 파일이 마지막 날짜가 수정되었습니다
• 유형 - '.'로 시작하는 파일 확장자.

응답: 서버에서 다시 전송 된 데이터.

이제 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);
 }