快捷導(dǎo)航

JavaScript打開(kāi)本地文件夾的4種方法舉例

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

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

方法一

通過(guò)ActiveXObject對(duì)象

比如打開(kāi)C盤(pán)：

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

方法二

設(shè)置一個(gè)不可見(jiàn)的input標(biāo)簽，通過(guò)input上面的webkitdirectory 屬性打開(kāi)本地文件，我寫(xiě)的是vue3用法：

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

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

方法三

設(shè)置一個(gè)不可見(jiàn)的input標(biāo)簽，通過(guò)input上面的multiple 屬性打開(kāi)本地文件，我寫(xiě)的是vue3用法：這個(gè)屬性與webkitdirectory 的具體區(qū)別可以百度看看

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

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

方法四

給自己定義的按鈕添加下面代碼，通過(guò)創(chuàng)建一個(gè)不可見(jiàn)的input標(biāo)簽實(shí)現(xiàn)

 <div  class=" button-common" @click="importFile()">導(dǎo)入</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 ;
   }