JavaScript에서 파일 열기 대화 상자

JavaScript에서 파일 열기 대화 상자

---

을 클릭하는 동안 HTML로 파일 열기 대화 상자를 표시하는 솔루션이 필요합니다 div. 를 div클릭하면 파일 열기 대화 상자가 열려야합니다 .

HTML 페이지의 일부로 입력 파일 상자를 표시하고 싶지 않습니다. 웹 페이지의 일부가 아닌 별도의 대화 상자에 표시되어야합니다.

---

여기에 좋은 것이 있습니다.

Fine Uploader 데모

그것은 <input type='file' />컨트롤 자체입니다. 그러나 div가 그 위에 배치되고 CSS 스타일이 적용되어 그 느낌을 얻습니다. 파일 컨트롤의 불투명도는 0으로 설정되어 div 클릭하면 대화 상자 창이 표시됩니다.

---

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

IE의 경우 다음을 추가하십시오.

$("#logo").css('filter','alpha(opacity = 0');

---

아무도 지적하지 않은 이유를 모르겠지만 여기에 Javascript없이 수행하는 방법이 모든 브라우저와도 호환됩니다.

---

편집 : 사파리 에서이 input숨겨진 경우에 display: none. 더 나은 접근 방식은 position: fixed; top: -100em.

---

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

당신이 선호하는 경우에 당신은 갈 수있다 " 올바른 방법"을 사용하여 for에서 label받는 포인팅 id과 같이 입력 :

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

---

사실, 불투명도, 가시성, <input>스타일링 등 모든 것이 필요 강화 . 한 번 본보세요.

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

jsFiddle 데모 . Chrome 30.0 및 Firefox 24.0에서 테스트되었습니다. 그러나 Opera 12.16에서는 작동하지 않습니다.

---

이것이 저에게 가장 잘 맞는 것입니다 (IE8, FF, Chrome, Safari에서 테스트 됨).

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

설명 : 클릭 할 요소 바로 위에 파일 입력을 배치 했으므로 모든 클릭이 해당 요소 또는 해당 레이블 (라벨 자체를 클릭 한 것처럼 업로드 대화 상자를 표시 함)에 도달합니다. 기본 입력의 버튼 부분이 레이블 측면에서 튀어 나와서 몇 가지 문제가 있었기 때문에 overflow: hidden입력과 display: inline-block레이블이 필요했습니다.

---

클라이언트 컴퓨터에서 자바 스크립트가 꺼져 있으면 어떻게됩니까? 모든 시나리오에 다음 솔루션을 사용하십시오. javascript / jQuery도 필요하지 않습니다. :

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

설명 : for="Your input Id". HTML에 의해 기본적으로 클릭 이벤트를 트리거합니다. 따라서 기본적으로 클릭 이벤트를 트리거하며 jQuery / javascript가 필요하지 않습니다. HTML로 간단하게 수행된다면 왜 jQuery / jScript를 사용합니까? 그리고 클라이언트가 JS를 비활성화했는지 알 수 없습니다. JS가 꺼져 있어도 기능이 작동합니다.

jsFiddle 작업 (JS, jquery 필요 없음)

---

먼저 head 태그를 추가 합니다.

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

이미 스크립트 태그 가있는 경우 위의 함수를 추가하기 만하면됩니다.

당신의에서 신체 또는 형태의 추가 태그 :

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

html의 어디에 있든 상관없이 OpenFileDialog 클래스 유형의 새 인스턴스를 전역 변수 로 만든 것과 같습니다. 코드 또는 xaml의 위치에 관계없이 이름이 요소 의 ID 이지만 스크립트 또는 코드에서 , 당신은 할 수없는 요소 입력 유형 = "파일"에 정의되지 않은 것들을 전역 함수가 있기 때문에, 자신의 이름을 입력 한 다음 함수를 속성을 읽거나 전화. 이 함수들에게 OpenFileDialog 인스턴스의 이름 인 숨겨진 입력 type = "file"의 id를 문자열로 지정하기 만하면됩니다.

HTML에 대한 열린 파일 대화 상자 인스턴스를 만드는 작업을 쉽게하기 위해이를 수행하는 함수를 만들 수 있습니다.

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

열린 파일 대화 상자를 제거하려면 다음 기능을 만들고 사용할 수 있습니다.

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

그러나 열린 파일 대화 상자를 제거하기 전에 다음 기능을 만들고 사용하여 존재하는지 확인하십시오.

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

숨겨진 입력 type = "file"을 추가하기 때문에 html 의 본문 또는 양식 태그에 열린 파일 대화 상자를 만들고 추가하지 않으려면 위의 생성 기능을 사용하여 스크립트에서 수행 할 수 있습니다. :

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

신체 또는 양식 태그 근처에 다음을 추가했는지 확인하십시오.

onload="yourBodyOrFormId_onload()"

이미 수행 한 경우 위의 줄을 수행 할 필요가 없습니다.

팁 : 아직없는 경우 프로젝트 또는 웹 사이트에 새 JScript 파일을 추가 할 수 있으며,이 파일에서 모든 열린 파일 대화 상자 기능을 스크립트 태그 및 html 또는 웹 양식 페이지에서 분리하고 사용할 수 있습니다. 이 JScript 파일의 html 또는 웹 양식 페이지에 있지만 html 또는 웹 양식 페이지를 JScript 파일에 연결하는 것을 잊지 마십시오. JScript 파일을 헤드 의 html 페이지로 드래그하기 만하면됩니다.태그. 페이지가 단순한 HTML이 아닌 웹 양식이고 헤드 태그가없는 경우 작동 할 수 있도록 아무 곳에 나 두십시오. 해당 JScript 파일에 전역 변수를 정의하는 것을 잊지 마십시오. 값은 본문 또는 양식 ID가 문자열입니다. JScript 파일을 html 또는 웹 양식 페이지에 링크 한 후 양식 본문의 이벤트를로드하고 해당 변수의 값을 본문 또는 양식 ID로 설정할 수 있습니다. 그런 다음 JScript 파일에서 더 이상 본문의 ID 나 한 페이지의 형식을 문서에 제공 할 필요가 없으며 해당 변수의 값만 제공하면됩니다. 해당 변수 bodyId , formId , bodyOrFormId 또는 원하는 다른 이름을 호출 할 수 있습니다 .

행운을 빕니다!

---

관심이있을 수 있습니다. http://code.google.com/p/upload-at-click/

요소를 클릭하면 '파일 열기'대화 상자가 열립니다.

사용자 정의 기능을 실행하십시오.

---

AFAIK 여전히 <input type="file">요소 가 필요합니다 . 그러면 quirksmode의 일부 항목을 사용 하여 스타일 을 지정할 수 있습니다.

---

가장 간단한 방법 :

#file-input {
  display: none;
}

<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

중요한 것은를 사용 display: none하면 숨겨진 파일 입력 (을 사용하여 발생하는 작업 opacity: 0) 이 차지하는 위치가 없다는 것입니다 .

---

유일한 방법 <input type="file">은 div 위에 투명한 플래시 동영상을 삽입하는 것입니다. 그런 다음 사용자 생성 클릭 이벤트 (Flash 10 새로운 보안 규칙 준수)를 사용하여 Flash의 FileReference.browse 호출을 트리거 할 수 있습니다 .

quirksmode 방식에 대한 추가 종속성을 제공 하지만 그 대가로 더 많은 이벤트 (예 : 내장 진행 이벤트)를 얻습니다.

---

사용 가능

$('<input type="file" />').click()

참고 URL : https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript