jQuery 대화 상자에 이미지 및 내용 넣기

Question

사용자가 방금 업로드 한 이미지를 볼 수있는 대화 상자를 만들고 싶습니다. 파일 업로드 시스템은 정상적으로 작동하지만 이미지를 동적으로 대화 상자에 넣으려면 빈 상자 만 나타납니다.

HTML 코드 :

<div id="dialogbox">{I want to change this conetent here to an image}</div> 

jQuery를/자바 스크립트 코드 :

function completeHandler(event){ 
    var data = event.target.responseText; 
    var datArray = data.split("|"); 
    if(datArray[0] == "upload_complete_msg"){ 
     hasImage = datArray[1]; 
     $(function() { 
      $("#dialogbox").dialog(); 
      $("#dialogbox").html('sadasdasd'); 
     }); 
    } else { 
     _("uploadDisplay_SP_msg_"+datArray[2]).innerHTML = datArray[0]; 
     _("triggerBtn_SP_"+datArray[2]).style.display = "block"; 
    } 

datArray[]는 PHP 검증의 응답 텍스트입니다. datArray[0]은 성공한 경우 upload_complete_msg과 같으며 datArray[1]은 filename123.jpg과 같은 이미지 파일 이름 및 확장자이고 darArray[2]은 단지 ID입니다. 따라서 사용자가 이미지를 성공적으로 업로드 한 경우 대화 상자가 나타납니다. .html() 함수를 사용하여 더 많은 내용을 추가하려했지만 빈 대화 상자를 다시 표시하지 않았습니다. $("#dialogbox").html('<img src="imgfolder/myimage.jpg">');과 같은이 대화 상자에 이미지를 넣을 수있는 방법은 무엇입니까?

Answer 1

다음과 같이 해보십시오.

function completeHandler(event) { 
 
    var data = event.target.responseText; 
 
    var datArray = data.split("|"); 
 
    if (datArray[0] == "upload_complete_msg") { 
 
    hasImage = "tempUploads/"+datArray[1]; 
 
    // Create a jQuery image object, and assign the src attribute. 
 
    var imgEl = $("<img>").attr("src", hasImage); 
 
    // stick that imgEl into the dialog. 
 
    $("#dialogbox").html(imgEl); 
 
    $("#dialogbox").dialog(); 
 

 
    } else { 
 
    _("uploadDisplay_SP_msg_" + datArray[2]).innerHTML = datArray[0]; 
 
    _("triggerBtn_SP_" + datArray[2]).style.display = "block"; 
 
    } 
 
}