전자 : 업로드 된 파일의 전체 경로를 얻으십시오

Question

전자를 사용하는 GUI 이제 buildind입니다. (데스크톱 앱용 PhoneGap과 같은)

<input type="file">에서 확인한 파일의 전체 경로를 사용 설정하는 방법이 있습니까?
Insted of C:\fakepath\dataset.zip 지금 (디렉토리 이름은 "fakepath"가 아니지만 그 값은 document.getElementById("myFile").value 임)

또는 다른 방법으로 파일을 선택할 수 있습니까?

Answer 1

전자는 File 객체에 path 속성을 추가, 그래서 당신은 사용하여 입력 요소에서 실제 경로를 얻을 수 있습니다 :

이

document.getElementById("myFile").files[0].path 

Answer 2

이 대답 How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?에 따라 보안상의 이유로 수행하려는 작업을 수행 할 수 없습니다.

그러나 내가 일했던 전자 프로젝트에서했던 것처럼 주변에서 해결할 수 있습니다.

1. 는 HTML 버튼 이전에 생성 한 버튼에 이벤트 리스너를 만들렌더링 과정에서 다음

2. 을 만듭니다.

   const ipc = require('electron').ipcRenderer; 
   const buttonCreated = document.getElementById('button-created-id'); 
   
   buttonCreated.addEventListener('click', function (event) { 
       ipc.send('open-file-dialog-for-file') 
   }); 
   

3. 그런 다음 주요 과정에서 당신은 파일을 선택한 다음 다시 렌더링 과정에 full path을 보내 showOpenDialog를 사용합니다.

   ipc.on('open-file-dialog-for-file', function (event) { 
   if(os.platform() === 'linux' || os.platform() === 'win32'){ 
       dialog.showOpenDialog({ 
        properties: ['openFile'] 
       }, function (files) { 
        if (files) event.sender.send('selected-file', files[0]); 
       }); 
   } else { 
       dialog.showOpenDialog({ 
        properties: ['openFile', 'openDirectory'] 
       }, function (files) { 
        if (files) event.sender.send('selected-file', files[0]); 
       }); 
   }}); 
   

4. 그런 다음 렌더링 과정에서 당신은 full path를 얻을 수.

   ipc.on('selected-file', function (event, path) { 
       console.log('Full path: ', path); 
   }); 
   

따라서 당신은 입력 타입 파일보다 비슷한 동작을하고, 전체 경로를 얻을 수 있습니다.

Answer 3

<script>const electron = require('electron');</script> 
<button id="myFile" onclick="this.value=electron.remote.dialog.showOpenDialog()[0]">UpdateFile</button> 

이제 document.getElementById("myFile").value에는 선택한 파일의 전체 경로가 포함됩니다.