js點擊按鈕選擇文件,js 點擊按鈕

本文目錄一覽：

• 1、js點擊選擇文件目錄的功能
• 2、js中如何點擊一個按鈕彈出一個file文件框
• 3、js 打開input 選擇指定類型文件（點擊按鈕打開input選擇文件上傳）
• 4、js實現點擊按鈕打開本地文件並將選擇的文件名顯示在文本框中?

js點擊選擇文件目錄的功能

最近做一個小項目，前端需要有一個功能是點擊某按鈕時，彈出文件選擇的框，然後獲取目錄並寫入對應的輸入框里，以往是選擇某個文件進行上傳，功能看起來有些像，但這次不同的是只能選擇某個目錄而不是文件，因為它並不是上傳，它只是為了選擇後台生成的文件保存的路徑。

於是網上查解決方案，查到兩種，

一種是僅在谷歌瀏覽器上有效的方式，在input節點裡加一個屬性 webkitdirectory，就可以實現點擊彈出選擇目錄的功能，然後就可以截取目錄，此種方式對非空文件夾是可以的實現的，只需監聽此input的change事件即可，但如果選擇的是空文件夾，就不會觸發事件，就無法獲取路徑，所以這方法不複合我的需求。

另一種是只適用於IE瀏覽器的方式，即調用IE的activeX控制項，為點擊按鈕綁定事件，然後就可以獲取目錄，然後到目錄調到想要的地方即可，具體實現方式是：

input id=”show”

button onclick=”clickBtn()”點擊/button

function click() {

    try {

        var Message = “\u8bf7\u9009\u62e9\u6587\u4ef6\u5939”; //選擇框提示                var Shell = new ActiveXObject(“Shell.Application”);

        var Folder = Shell.BrowseForFolder(0, Message, 64, 17); //起始目錄為：我的電腦                //var Folder = Shell.BrowseForFolder(0, Message, 0); //起始目錄為：桌面                if (Folder != null) {

            Folder = Folder.items(); // 返回 FolderItems 對象            

            Folder = Folder.item(); // 返回 Folderitem 對象            

            Folder = Folder.Path; // 返迴路徑            

            if (Folder.charAt(Folder.length – 1) != “\\”) {

                Folder = Folder + “\\”;

            }

            document.getElementById(‘show’).value = Folder;

            return Folder;

        }

    } catch (e) {  alert(e.message); }

}

但些方式也有一個問題是，此控制項是默認關閉的，需要用戶手動啟用，並且要把本站點加入可信任站點才行，具體設置過程是：

1. 單擊菜單工具-Internet選項-安全-受信任站點-站點-把此網站設為可信站點

2. 在自定義級別-對沒有標記為安全的ActiveX控制項進行初始化和腳本運行”—-“啟用”

js中如何點擊一個按鈕彈出一個file文件框

js中點擊一個按鈕彈出一個file文件框的步驟如下：

1.在文件夾中創建一個html文件「test」。

2.在test文件中添加一個html的框架。

3.添加兩個input，一個是button，一個是file把id設置為「open」style類型設置為「display:none」不顯示。

4.打開後我們發現只顯示這一個「打開文件」按鈕。

5.現在我們給button添加onclick事件，調用openfile觸發id為「open」的file。

6.現在我們在瀏覽器中點擊「打開文件」文件按鈕就會彈出選擇文件路徑對話框了。這樣就解決了js中點擊一個按鈕彈出一個file文件框的問題了。

js 打開input 選擇指定類型文件（點擊按鈕打開input選擇文件上傳）

——我點擊的按鈕——-

el-button @click=”uploadingAudioButton”

i class=”el-icon-folder-add”/i

/el-button

樣式如下

div v-show=”false”

input

type=”file”

accept=’audio/ ‘ //指定類型 可以是image/ 等

capture=”microphone”

ref=”selectFile”

id=”selectFile”

@change=”checkFile( refs.selectFile.click();

}

//綁定在input上的事件

checkFile(e) {

//獲取到你選擇的文件

console.log(e.target.files[0]);

}

js實現點擊按鈕打開本地文件並將選擇的文件名顯示在文本框中?

先把每個要顯示的數據都要放在一個input或者div裡面，並設置一個id，或者name屬性，根據getElementById,getElementByName函數取到所要操作的對象，對於input可以用.val()得到值，對於div等自己試試.innerHtml(),.html(),.text()函數看看哪個能取到值。然後把取到的值賦給那個文本框就可以了。

示例代碼：

input type=”file” name=”file” accept=”.xls” value=””/