js를 통해 파일 선택 대화 상자를 여는 방법은 무엇입니까?

js를 통해 파일 선택 대화 상자를 여는 방법은 무엇입니까?

$('#id').click();

Mac OS의 Chrome 26에서는 작동하지 않습니다.

실제로 문제는 양식에 통합될 수 있는 "업로드" 위젯을 만드는 것입니다.위젯은 두 부분으로 구성됩니다.첫 번째 부분은 이니시에이터 버튼과 오류/성공 메시지가 포함된 div입니다.iframe에 파일을 입력하고 제출하는 두 번째 부분으로 다른 양식을 넣는 것 같습니다.제출 후 첫 번째 부분의 숨겨진 필드를 주요 형식으로 채우거나 오류를 표시합니다.

쉬운 방법은 파일 양식을 메인 양식에 추가하는 것이지만 금지되어 있습니다.

JS 전용 - jquery 필요 없음

입력 요소를 만들고 클릭을 트리거하기만 하면 됩니다.

var input = document.createElement('input');
input.type = 'file';
input.click();

파일 선택 대화상자를 여는 것이 가장 기본적이지만 선택한 파일을 처리하지 않으면 아무 소용이 없습니다...

파일 처리

추가onchange새로 생성된 입력에 대한 이벤트를 통해 사용자가 파일을 선택하면 작업을 수행할 수 있습니다.

var input = document.createElement('input');
input.type = 'file';

input.onchange = e => { 
   var file = e.target.files[0]; 
}

input.click();

현재 다양한 정보를 저장하는 파일 변수가 있습니다.

file.name // the file's name including extension
file.size // the size in bytes
file.type // file type ex. 'application/pdf'

좋았어!

하지만 파일의 내용이 필요하면 어떻게 해야 합니까?

다양한 이유로 파일의 실제 내용을 확인할 수 있습니다.이미지를 배치하고, 캔버스에 로드하고, Base64 데이터 url로 창을 만드는 등 우리는 사용해야 합니다.FileReaderAPI

파일 판독기 인스턴스를 만들고 사용자가 선택한 파일 참조를 로드합니다.

var input = document.createElement('input');
input.type = 'file';

input.onchange = e => { 

   // getting a hold of the file reference
   var file = e.target.files[0]; 

   // setting up the reader
   var reader = new FileReader();
   reader.readAsText(file,'UTF-8');

   // here we tell the reader what to do when it's done reading...
   reader.onload = readerEvent => {
      var content = readerEvent.target.result; // this is the content!
      console.log( content );
   }

}

input.click();

위의 코드를 개발 도구의 콘솔 창에 붙여넣으면 파일 선택 대화 상자가 생성되고, 파일을 선택한 후 콘솔이 파일 내용을 인쇄합니다.

예 - "스택 오버플로의 새 배경 이미지!"

파일 선택 대화 상자를 만들어 스택 오버플로 배경 이미지를 좀 더 매운 이미지로 변경해 보겠습니다...

var input = document.createElement('input');
input.type = 'file';

input.onchange = e => { 

   // getting a hold of the file reference
   var file = e.target.files[0]; 

   // setting up the reader
   var reader = new FileReader();
   reader.readAsDataURL(file); // this is reading as data url

   // here we tell the reader what to do when it's done reading...
   reader.onload = readerEvent => {
      var content = readerEvent.target.result; // this is the content!
      document.querySelector('#content').style.backgroundImage = 'url('+ content +')';
   }

}

input.click();

devtools를 열고 위의 코드를 콘솔 창에 붙여넣으면 파일 선택 대화 상자가 팝업되고, 이미지를 선택하면 스택 오버플로 콘텐츠 상자 배경이 선택한 이미지로 변경됩니다.

jQuery 사용

나는 버튼과 보이지 않는 입력을 다음과 같이 만들 것입니다.

<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

jQuery를 추가하여 트리거합니다.

$('#button').on('click', function() {
    $('#file-input').trigger('click');
});

바닐라 JS 사용

jQuery가 없는 동일한 아이디어(@Pascale에 대한 크레딧):

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

바로 사용할 수 있는 기능(Promise

/**
 * Select file(s).
 * @param {String} contentType The content type of files you wish to select. For instance, use "image/*" to select all types of images.
 * @param {Boolean} multiple Indicates if the user can select multiple files.
 * @returns {Promise<File|File[]>} A promise of a file or array of files in case the multiple parameter is true.
 */
function selectFile(contentType, multiple){
    return new Promise(resolve => {
        let input = document.createElement('input');
        input.type = 'file';
        input.multiple = multiple;
        input.accept = contentType;

        input.onchange = () => {
            let files = Array.from(input.files);
            if (multiple)
                resolve(files);
            else
                resolve(files[0]);
        };

        input.click();
    });
}

여기서 사용해 보세요.

// Content wrapper element
let contentElement = document.getElementById("content");

// Button callback
async function onButtonClicked(){
    let files = await selectFile("image/*", true);
    contentElement.innerHTML = files.map(file => `<img src="${URL.createObjectURL(file)}" style="width: 100px; height: 100px;">`).join('');
}

// ---- function definition ----
function selectFile (contentType, multiple){
    return new Promise(resolve => {
        let input = document.createElement('input');
        input.type = 'file';
        input.multiple = multiple;
        input.accept = contentType;

        input.onchange = _ => {
            let files = Array.from(input.files);
            if (multiple)
                resolve(files);
            else
                resolve(files[0]);
        };

        input.click();
    });
}

<button onclick="onButtonClicked()">Select images</button>
<div id="content"></div>

완전성을 위해 Ron van der Heijden의 순수 자바스크립트 솔루션:

<button onclick="document.querySelector('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">

HTML에서만:

<label>
  <input type="file" name="input-name" style="display: none;" />
  <span>Select file</span>
</label>

위의 코드로 이 바이올린을 확인합니다.

'levi'에서 답변을 확장하고 파일 업로드를 처리할 수 있도록 업로드에서 응답을 가져오는 방법을 표시하려면:

selectFile(event) {
    event.preventDefault();

    file_input = document.createElement('input');
    file_input.addEventListener("change", uploadFile, false);
    file_input.type = 'file';
    file_input.click();
},

uploadFile() {
    let dataArray = new FormData();
    dataArray.append('file', file_input.files[0]);

    // Obviously, you can substitute with JQuery or whatever
    axios.post('/your_super_special_url', dataArray).then(function() {
        //
    });
}

function promptFile(contentType, multiple) {
  var input = document.createElement("input");
  input.type = "file";
  input.multiple = multiple;
  input.accept = contentType;
  return new Promise(function(resolve) {
    document.activeElement.onfocus = function() {
      document.activeElement.onfocus = null;
      setTimeout(resolve, 500);
    };
    input.onchange = function() {
      var files = Array.from(input.files);
      if (multiple)
        return resolve(files);
      resolve(files[0]);
    };
    input.click();
  });
}
function promptFilename() {
  promptFile().then(function(file) {
    document.querySelector("span").innerText = file && file.name || "no file selected";
  });
}

<button onclick="promptFilename()">Open</button>
<span></span>

먼저 파일 이름을 저장할 변수 선언(나중에 사용):

var myfiles = [];

파일 열기 대화 상자

$('#browseBtn').click(function() {
    $('<input type="file" multiple>').on('change', function () {
        myfiles = this.files; //save selected files to the array
        console.log(myfiles); //show them on console
    }).click();
});

인터넷에 파일 이름을 배열에 저장하는 방법에 대한 명확한 지침이 없기 때문에 누군가에게 도움이 될 수 있습니다!

jquery 라이브러리 포함

<button onclick="$('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">

이 문제는 저를 어리둥절하게 했습니다.add event listener를 추가하는 것은 내가 원하지 않았던 이벤트를 호출했습니다.단순 선택에 관심이 있는 경우 이벤트가 필요하지 않습니다.입력/파일 대화 상자는 별도의 창에서 선택한 파일 이름을 가진 호출자에게 되돌아갑니다(디버거의 요소를 보면 "files" 개체도 일부 다른 속성을 전달합니다).사용자 4602228에게 길을 안내해 주셔서 감사합니다...

아래에 표시된 간단한 입력/출력 파일 선택기 >>

function loadsettings()
//
// use web page dialog to get user settings file
//
{
   var setload=parent.settings.document.createElement("input");
   setload.type="file";
   setload.click();
   settings(*setload.files[0]*,false,false); //these are custom parameters 
}
return;

언급URL : https://stackoverflow.com/questions/16215771/how-to-open-select-file-dialog-via-js