js獲取選擇文件,js獲取文件格式

本文目錄一覽：

• 1、input file 在js里獲取文件內容
• 2、js選取文件並顯示文件
• 3、js實現選擇文件夾路徑
• 4、js獲取HTML5 多文件file選擇的數量
• 5、原生js獲取文件
• 6、js點擊選擇文件目錄的功能

input file 在js里獲取文件內容

input file在選擇完文件之後，他的值就是這個文件在你機器上的路徑

js本身是不能去讀取這個文件的內容的，比如獲取圖片大小，類型之類

你說的功能是屬於ajax上傳文件，伺服器完成上傳後返迴文件的信息（或者內容），然後再在html上載入出來

這個功能一定要後台來完成

例

上傳一個文本文件，input file獲取本機路徑，上傳至伺服器，伺服器讀取文本內容返迴文本內容，在html上列印出來

js選取文件並顯示文件

你用input就能獲取到文件路徑吧， 你在input下面加個img，通過js把input的文件路徑寫在img src屬性上就好了，沒有點擊上傳的時候。如果你想文件都上傳到伺服器上後，只能寫相對路徑了

js實現選擇文件夾路徑

input type=”button” value=”choose folder” name=”” onclick=”BrowseFolder()”

function BrowseFolder(){

try{

   var Message = “please choose folder”;   //選擇框提示信息

   var Shell = new ActiveXObject( “Shell.Application” );

   var Folder = Shell.BrowseForFolder(0,Message,0x0040,0x11);//起始目錄為：我的電腦

   //var Folder = Shell.BrowseForFolder(0,Message,0); //起始目錄為：桌面

   if(Folder != null){

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

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

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

  alert(Folder); 

 }

}catch(e){

   alert(“exception”);

}

}

js獲取HTML5 多文件file選擇的數量

1、並沒有原生的方法控制個數。

2、解決辦法：等選擇完了用js去計算有多少個，如果超出了就提示。思路如下：

1）你可以在選擇完文件後，你的input的onchange事件中，判斷event.target.files.length就可以知道你的文件多少了。

2）在onchange事件中使用

if (event.target.files.length 10) {

console.log(“圖片太多啦！超過十張啦！”);

let files = event.target.files

files = Array.from(files).slice(0,10)

//此處寫你的上傳介面，參數就是files

console.log(“只上傳10張哦”,files)

}

這個方法可以限制文件只需要上傳選中的前10個。

擴展資料：

1、關於input標籤上傳文件，還有一個屬性是accept。可以限制只能上傳圖片類型，這樣可以避免用戶上傳很多非圖片的文件，不好處理。使用方法：input id=”File1″ type=”file”  accept=”image/*”  /

2、調用介面上傳文件的方法，可以使用FormData,FromData 是一次 http mulitpartfrom-data 的請求內容可以使用 append 方法向其添加名詞對,然後使用 XMLHttpRequest 的 send() 方法發送.

eg:

var fileObj = new FromData();

fileObj.append(‘key’,value);   // value 可以是一個字元串 string 也可以是一個 blob （代表，file對象）

var xhr = new XMLHttpRequest();

xhr.open(‘POST’,’url’,true);

xhr.send(fileObj);

參考資料：

MDN技術文檔-input type=’file’/

原生js獲取文件

HTML5新增了關於文件的File，FileReader兩個對象，用於獲取文件信息和讀取文件信息。

var

    fileInput = document.getElementById(‘test-image-file’),

    info = document.getElementById(‘test-file-info’),

    preview = docement.getElementById(‘test-image-preview’);

//監聽change事件

fileInput.addEventListener(‘change’, function() {

  //清除背景圖片

  preview.style.backgroundImage = ”;

  //檢查文件是否選擇

  if(!fileInput.value) {

    info.innerHTML = ‘沒有選擇文件’;

    return;

  }

  //獲取file文件引用：

  var file = fileInput.files[0];

  //獲取文件信息

  info.innerHTML = ‘文件：’ + file.name + ‘br’ +

                  ‘大小：’ + file.size + ‘br’ +

                  ‘修改：’ + file.lastModifiedDate;

if(file.type !== ‘image/jpeg’ file.type !== ‘image/png’ file.type !== ‘image/gif’) {

  alert(‘不是有效的圖片文件’);

  return;

}

  //讀取文件

  var reader = new FileReader();

  reader.onload = function(e) {

    var data = e.target.result;

  preview.style.backgroundImage = ‘url(‘+ data + ‘)’;

  };

  //以DataURL的形式讀取文件：

  reader.readerAsDataURL(file);

})

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