JavaScript打開本地文件夾的4種方法舉例

更新時間：2023年07月28日 09:22:20 作者：敲代碼的柯基

這篇文章主要給大家介紹了關(guān)于JavaScript打開本地文件夾的4種方法,JavaScript在前端開發(fā)中是一種使用非常廣泛的編程語言,常用于實現(xiàn)網(wǎng)頁中的交互和動態(tài)效果,需要的朋友可以參考下

方法一

通過ActiveXObject對象

比如打開C盤：

function openFileIIs(filename){        
        var obj=new ActiveXObject("wscript.shell"); 
         if(obj){ 
             obj.Run("\""+filename+"\"", 1, false );
              //obj.run("osk");/*打開屏幕鍵盤*/
              //obj.Run('"'+filename+'"'); 
              obj=null; 
            } 
    }

方法二

設置一個不可見的input標簽，通過input上面的webkitdirectory 屬性打開本地文件，我寫的是vue3用法：

 <div  class=" button-common" @click="importFile()">導入
              <input  v-show="false"
                     ref="inputFile"
                      id="file"
                     type="file"
                      webkitdirectory                    
                    />
               </div>

export default {
...
	setup(){
	//手動給input綁定事件
	 function importFile() 
            this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
        }
	return{
	importFile
	}
	}
}

方法三

設置一個不可見的input標簽，通過input上面的multiple 屬性打開本地文件，我寫的是vue3用法：這個屬性與webkitdirectory 的具體區(qū)別可以百度看看

 <div  class="import-btn button-common" @click="importStudy()"導入
                  <input  type="file" ref="file" multiple="multiple" @change="onInputFileChange"
                    />
               </div>

export default {
...
	setup(){
	//手動給input綁定事件
	 function importFile() 
            this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))
        }
	return{
	importFile
	}
	}
}

方法四

給自己定義的按鈕添加下面代碼，通過創(chuàng)建一個不可見的input標簽實現(xiàn)

 <div  class=" button-common" @click="importFile()">導入</div>

 function importFile() {
  		var inputObj=document.createElement('input')
        inputObj.setAttribute('id','_ef');
        inputObj.setAttribute('type','file');
        inputObj.setAttribute("style",'visibility:hidden');
        document.body.appendChild(inputObj);
        inputObj.click();
        inputObj.value ;
   }