<input type="file"> 태그 대신에 파일 브라우저 대화 상자를 시작하는 버튼이 필요합니다.JavaScript에서는 프로그래밍 방식으로 파일 브라우저 대화 상자를 시작할 수 있습니까?
내 생각에는 숨겨진 파일 입력 태그와 버튼이 있다고 생각했습니다. 나는 단추를 클릭하여 숨겨진 파일 입력의 onclick을 발생시키는 버튼을 사용할 것입니다.하지만 제대로 작동하지 못했습니다.
질문은 이것이 가능합니까? 그리고 두 번째로 이것을 할 수 있고 여전히 정보를 다시 양식으로 보낼 수있는 더 좋은 방법이 있습니까?
이것은 플래시에서 자바 스크립트 (JS가 없으면 우리 사이트는 작동하지 않습니다)에서 저하되는 기능의 최하위 계층이 될 것입니다. 따라서 기본 JS 및 HTML에서만 작동해야합니다.
예, 불투명도를 통해 (대부분의 브라우저에서) 가능합니다. Here's a tutorial.
이것은 보안 문제이므로 향후 브라우저에서이를 방지하기위한 조치가 취해질 수 있습니다. – eyelidlessness
가능합니까? 예. 추천? 안돼. 보안 문제? 명확히. – Kon
나는 이것을 조사했고, 내가 원하는 것을하지 않았다. 그리고 잠재적 인 보안/비추천 문제로 나는 그것을 사용하지 않을 것입니다.응답 주셔서 감사합니다. – user28655
나는 이것을 (ceejayoz의 대답을보십시오) 과거에했지만 지금은 반대하고 있습니다. 보안 문제이므로 미래에 의존 할 수 없습니다. 더 나은 해결책은 파일 형식을 점진적으로 향상시켜 파일 입력을 더 많은 기능을 갖춘 플래시 또는 자바 기반 업 로더로 대체하거나 HTML 5가 제공 될 경우 더 나은 기능을 사용하는 것입니다.
플래시 또는 자바 애플릿을 사용하기 전에 항상 일반 양식을 사용해야합니다. – Jan
@Jan, 그 대답은 내가 말했듯이 : "점진적으로 향상"은 평범한 HTML로 시작하여로드 후 클라이언트 측 (JS, Flash, 무엇이든)에서 향상된다는 것을 의미합니다. – eyelidlessness
브라우저의 파일 입력 컨트롤을 해킹하려고 시도하는 대신 SWFUpload과 같은 플래시 기반 파일 업 로더를 사용하는 것이 좋습니다. 나는 이것을 내 프로젝트 중 하나에서 사용하기 시작했으며 매우 만족 스러웠다.
당신은 자바 스크립트 콜백을 얻을 수 있으며 UI를 위해 원하는 모든 것을 할 수 있습니다 (플래시는 업로드 기능입니다).
나는 투명성 트릭을 피하고 싶습니다.
이
이 나를 위해 일한 (jQuery를 사용) :$("#upload-box").change(function(){
$("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
$("#upload-box").click();
});
그리고 HTML :
<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />
그것은 텍스트 입력 및 숨겨진 업로드 입력을 생성하고, 패치 (= 노선을)를이 숨겨진 파일 입력에 대한 텍스트 입력을 클릭하십시오.
파일을 선택하면 대부분의 사용자가 인터페이스에서 예상하는대로 텍스트 입력에 파일 이름을 다시 씁니다.
FF, Chrome, IE9 및 +에서 작동해야합니다. IE8에서 테스트하지 않았습니다.
여기에 jsfiddle이 있습니다. 네가 원한다면 내 대답을 upvoting 해줘서 고마워.
파일 이름 만 리턴하지만'c :/test.png'와 같은 파일의 전체 경로를 얻는 방법 – Jeevanantham
@ jerith2, 당신은 전체 경로를 얻을 수없고 어쨌든 유용하지 않을 것입니다. 파일의 바이너리 데이터를보고 싶다면'FileReader' 객체로 파일을 읽을 수 있습니다 (필요에 따라 다른 데이터로 변환 할 수 있습니다). –
보안 문제없이 수행 할 수 있습니다. onmouseenter에있는 코드는 실제 업로드 버튼의 zindex를 승격시킵니다 (불투명도를 사용하거나 투명하게 만들 수 있음). 그러면 클릭을 트리거 할 필요가 없으며 사용자의 클릭 만 사용하면됩니다.
그것은 나를 위해 일했습니다 ... 내 대답을 참조하십시오. 어쩌면 그것은 브라우저 호환성 일 것입니다. 이 질문은 6 살입니다. – Rolf