js獲取file選中的文件,jquery獲取file文件

本文目錄一覽：

• 1、js獲取HTML5 多文件file選擇的數量
• 2、input file 在js里獲取文件內容
• 3、如何利用js在點擊input type=file後選擇好文件後，把選擇的文件名直接複製到另外一個input里？
• 4、怎麼用js來獲取 file中的上傳文件的文件名
• 5、js 怎麼獲取input type=”file” 所選擇的文件的絕對路徑
• 6、原生js獲取文件

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’/

input file 在js里獲取文件內容

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

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

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

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

例

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

如何利用js在點擊input type=file後選擇好文件後，把選擇的文件名直接複製到另外一個input里？

具體的方法和詳細的操作步驟如下：

1、首先，在打開的vs2015中選擇「文件-新建-文件」，如下圖所示。

2、其次，在打開的「新建文件」窗口中選擇「HTML頁」，如下圖所示。

3、接著，在新的HTML頁面中，我們創建一個要使用的file標籤input  type=”file” /，如下圖所示。

4、然後，修改input標籤的樣式。為了更好地進行說明，這裡標籤上直接寫style，input  type=”file”  style=”background-image:url(‘z:\\pic1.jpg’);”/，如下圖所示。

5、隨後，在這裡通過寫一個a標籤來更改 input=’file’標籤的背景圖像，如下圖所示。

6、最後，全部完成並預覽效果，如下圖所示。

怎麼用js來獲取 file中的上傳文件的文件名

在firefox上，input（type=file）默認獲取到的value值就是文件名。

在IE上，input（type=file）默認獲取到的value值是路徑。

因此用js來獲取fileupload中的上傳文件的文件名需要多方面考慮。

示例代碼：

form action=”” method=”get” onSubmit=”return false;”

input type=”text” name=”test” id=”test”

input type=”file” name=”testFile” onChange=”if(this.value)insertTitle(this.value);”

input type=”submit” value=”提交”

/form

script language=”javascript”

function insertTitle(path){

var test1 = path.lastIndexOf(“/”); //對路徑進行截取

var test2 = path.lastIndexOf(“\\”); //對路徑進行截取

var test= Math.max(test1, test2)

if(test0){

document.getElementById(“test”).value = path;

}else{

document.getElementById(“test”).value = path.substring(test + 1); //賦值文件名

}

}

/script

js 怎麼獲取input type=”file” 所選擇的文件的絕對路徑

安全原因，瀏覽器不提供獲取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);

})