파일 업로드 옆에 이미지 미리보기 이미지가있는 ExtJS FormPanel

Question

기본적으로 FileUpload로 구성된 FormPanel이 있습니다. 내가하고 싶은 일은 다음과 같습니다. 편집 할 때 이미 업로드 한 이미지의 미리보기 이미지를 파일 업로드 필드 오른쪽에 표시하십시오. 내 항목은 다음과 같이 :

items = [ 
{ 
    allowBlank: false, 
    fieldLabel: 'Icon', 
    hidden: true, 
    name: 'Icon', 
    ref: 'IconField', 
    xtype: 'Ext.ux.form.FileUploadField' 
}, 
{ 
    ref: 'PreviewImage', 
}; 

내가 두 가지해야 할 다음 'PreviewImage'구성 요소 내부

• 로드 이미지를, 내가 this['PreviewImage'].update('<img src="image.png" />'); 같은 것을 통해이 작업을 수행 할 것입니다 것은이 최선의 방법입니다 그걸 할거야?

• 이미지를 업로드 필드의 오른쪽으로 이동시킵니다. 이 작업을 수행하는 가장 좋은 방법은 확실하지 않습니까? 패널에 두 요소를 모두 넣을 생각 이었지만, 다시 한 번 가장 좋은 방법은이 작업을 수행하는 것입니다.

어떤 아이디어라도 환영합니다!

Answer 1

이전 브라우저를 지원할지 여부를 결정해야합니다.

이미지를 업로드하는 서버에 양식을 제출하고 서버에서 이미지의 URL을 반환 한 다음 이미지의 src로 설정해야합니다. 이것은 숨겨진 IFrame을 통해 이루어 지므로 페이지가 새로 고쳐지지 않습니다.

최신 HTML5 방법은 이미지를 업로드하기 전에 FileReader API를 사용하여 이미지의 src (dataurl)로 설정 한 다음 XmlHttpRequest Level 2를 사용하여 업로드하는 것입니다. FormData 클래스를 사용하십시오.

파일 필드 옆에 이미지를 가져 오려면 열 또는 hbox 레이아웃을 사용할 수 있습니다. 그것은 당신을 위해 떠 다니는 것입니다.