2010-08-10 2 views
0

jquery iframe 플러그인을 사용하여 HTML을 내 iframe에 넣습니다. 무엇보다도, 그것은 에는 다음이 포함 iframe의 양식에서 '파일 선택'버튼을 누르십시오 (jquery 사용)

<form id="update" action="dummy" method="POST" enctype="multipart/form-data"> 
    <div><input type="file" name="data" id="update_data"></div> 
</form> 

그런 다음 나는 다음과 같은 기능을 실행합니다. Chrome 디버거에서 재미있게 보니 프레임, 양식 및 입력 필드에 성공적으로 래치되고있는 을 볼 수 있습니다. 그러나 선택 도구가 팝업되지 않으며 양식이 (JAX-RS) 서비스에 제출되지 않습니다.

function update_file(file) { 
    var iframe = $('#new_file_iframe'); 
    var delform = iframe.contents().find("#update"); 
    var fileinput = iframe.contents().find("#update_data"); 
    // URLencoding? 
    delform.attr("action", "/rex-ws/service/jape/update-file/" + file); 
    fileinput.click(); 
    delform.submit(); 
} 

아마도 click은 올바르게 설정하지 않았습니까?

답변

1

이것은 보안상의 문제입니다. 브라우저는 프로그래밍 방식으로 파일을 업로드 할 때 무슨 일이 일어날 지 잘 모르며 악명이 높습니다.

나는이 이유 때문에 fileinput.click()을 실행하는 것이 좋습니다.

UploadifySWFUpload과 같은 플래시 기반 업 로더는 여기에 더 많은 자유가 있습니다. 파일 피커를 프로그래밍 방식으로 열 수 있다고 생각합니다. 그러나 이러한 업 로더 중 하나를 사용하려면 약간의 작업이 필요합니다.

+1

현재 날짜 업데이트 ... fileinput.click()은 FF와 IE에서는 작동하지만 Chrome에서는 작동하지 않습니다. –

1

프로젝트에서이 작업을 수행 했으니 조금 까다 롭습니다.

당신은 기본적으로 (글쎄, 적어도 내가 한 이유를) 할 수는 무엇을 가지고 :

  • 가 업로드 작업 방법 (일반 클릭 이벤트에 대한 당신의 메인 페이지
  • 에 입력 [파일] 되세요 메인 페이지) ajaxSubmit (jQuery 플러그인으로 iframe에 양식을 제출 작성하고 양식 iframe을하고 입력 [파일] 복제 및 새로 만든 iframe이 양식
  • 에 첨부)

코드를 여기에 추가 할 수 있습니다 (약 120 행).

..fredrik

편집 :

당신이 HTML5 사이트를 디자인하는 경우는, 새로운 입력 파일 API를 보라. https://developer.mozilla.org/en/using_files_from_web_applications

+0

이 방법으로 파일 선택 대화 상자가 자동으로 열리는 것을 확인할 수 없습니다. 또한 파일 입력이 아직 선택된 파일이있는 iframe으로의 전송에서 살아남지 못할 것이라고 확신합니다. 이게 효과가 있니? –

+0

글쎄, 팝업 자동으로 열리지 않습니다. 사용자 행동이 될 것입니다. 같은 문제에 대한 또 다른 접근 방법입니다 (문제가 여기 있다고 생각하지 마십시오!). 하지만 그렇습니다. 입력은 양식이 제출 될 때까지 조작 할 수있는 특성을 가진 DOM 요소 일 뿐이므로 그것은 모든 것을 파악하는 데 시간이 걸렸지 만, 간단히 말해서 작동합니다. – fredrik

+0

OP의 포인트를 자동으로 클릭하지는 않습니까? (나는 틀릴 수도있다.) –

관련 문제