獲取上傳文件的大小 React JS

Question

我將如何在 React JS 中查找上傳文件的大小？

Answer 1

假設，你的 jsx 就像<input type="file" onChange={this.fileChangedHandler}/>

現在，在您的fileChangedHandler ，您必須執行以下操作：

fileChangedHandler = (event) => {
    let file_size = event.target.files[0].size;

    //or if you like to have name and type
    let file_name = event.target.files[0].name;
    let file_type = event.target.files[0].type;
   //do whatever operation you want to do here
};

Answer 2

您首先需要抓取輸入類型文件上傳，如 var uploadDocuments = document.getElementById('file-0'); //抓取html文件上傳元素

並且可以使用 .size 屬性獲取文件大小。

uploadDocuments.files[0].size //這里給出上傳文件的大小

Answer 3

React.js 僅用於您的視圖。 您可以將普通 javascript 用於其他所有內容。

如果您想使用 jquery 在某個 url 中查找文件的大小：

var req = $.ajax({
  type: "HEAD",
  url: 'some/url/here',
  success: function () {
    console.log(req.getResponseHeader("Content-Length")); //Filesize
  }
});

在成功回調中，您可以使用 setState() 將大小保存到 React 的狀態，然后在渲染方法中的 div 中顯示大小。

您也不僅限於對 HEAD 請求使用 jquery。 SuperAgent 是另一種流行的。