js選擇文件事件,js選中文本事件

本文目錄一覽：

• 1、file控件選擇上傳文件確定後觸發的js事件是哪個？
• 2、file控件選擇上傳文件確定後觸發什麼js事件
• 3、js中如何點擊一個按鈕彈出一個file文件框
• 4、javascript實現： 會彈出文件選擇框，選擇後綴為*.txt的文件
• 5、用js如何實現點擊按鈕打開一個指定路徑下的文件
• 6、js點擊選擇文件目錄的功能

file控件選擇上傳文件確定後觸發的js事件是哪個？

file控件選擇上傳文件確定後觸發的js事件是onchange事件。

file控件：

input type = “file” id = “idName” multiple = “multiple”

document.getElementById(“idName”).file; //返回的是fileList對象。

fileList對象的常用方法有name（文件名稱）、type（文件類型）、size（文件大小）、lastModefiedDate（文件的最後修改時間）等

默認情況下，選擇文件為單選，但是加上multiple屬性之後，即可以多選。

此處的multiple屬性，只寫”multiple”或者是寫成”multiple=’multiple’”這種形式都是可以，這點類似於autofocus,loop這類屬性。個人習慣寫成multiple=’multiple’這種格式。

此外，file控件還有accept屬性，用於指定選擇文件類型。

file控件選擇上傳文件確定後觸發什麼js事件

1、定義一個Html文件，編寫file控件。

2、在html文件中增加js代碼，監聽File控件。

3、預覽頁面效果。

4、上面的上傳文件比較複雜，可以用jquery更簡便的方法。

5、點擊選擇文件按鈕，進行選擇文件。

6、編輯完ihtml文件後，用瀏覽器打開html文件，當鼠標左鍵單擊span時顯示”觸發鼠標單擊事件”，雙擊span時顯示”事件”，完成關閉。

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文件框的問題了。

javascript實現： 會彈出文件選擇框，選擇後綴為*.txt的文件

面一段代碼是基於js實現的點擊某個圖標或按鈕彈出文件選擇框的核心代碼，代碼比較簡單，需要的朋友參考下

具體代碼如下所示：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

HTML

head

script type=”text/javascript” src=”script/jquery-1.6.2.min.js”/script

script type=‘text/javascript‘

function selectFile(){

//觸發 文件選擇的click事件

$(“#file”).trigger(“click”);

//其他code如 alert($(“#file”).attr(“value”))

}

/* 獲取 文件的路徑 ，用於測試*/

function getFilePath(){

alert($(“#file”).attr(“value”));

}

/script

/head

body

!– 給這個input 設置樣式隱藏，切忌不可用display控制隱藏,可能不能跨瀏覽器 —

input type=”file” id=”file” onchange=”getFilePath()”

style=”filter:alpha(opacity=0);opacity:0;width: 0;height: 0;”/

button onclick=”selectFile();”select file/button

button onclick=”getFilePath()”get FilePath/button

/body

/html

選擇後綴就需要去寫個函數方法了！

用js如何實現點擊按鈕打開一個指定路徑下的文件

方法步驟如下：

1、首先，打開計算機，然後打開JS，在其中創建一個HTML文件“test”。

2、然後將HTML框架添加到測試文件中。

3、然後添加兩個輸入，一個是button，另一個是file將ID設置為“open”樣式類型為“display：None”並且不顯示。

4、打開後，僅顯示此“打開文件”按鈕。

5、現在將onclick事件添加到按鈕，並調用openfile來觸發ID為“open”的文件。

6、現在單擊瀏覽器中的“打開文件”就會彈出選擇文件路徑對話框。

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控件進行初始化和腳本運行”—-“啟用”