javascript檢測(控制 )上傳文件大小

JavaScript 可以檢測文件的大小，以控制上傳文件的大小。以下是檢查文件大小的完整攻略：

步驟一：HTML標籤生成上傳文件按鈕

首先，在HTML中使用 <input> 元素生成上傳文件的按鈕，代碼如下：

<input type="file" name="myFile" id="myFileInput">

步驟二：JavaScript獲取上傳文件信息

使用JavaScript獲取選擇上傳文件的相關信息，包括文件名和文件大小，代碼如下：

var fileInput = document.getElementById('myFileInput');
var fileSize = fileInput.files[0].size; // 獲取文件的大小
var fileName = fileInput.files[0].name; // 獲取文件的名稱

步驟三：檢查上傳文件大小，給出提示信息

根據獲取的文件大小數據，使用條件語句來檢查文件大小是否超過限制，如果超過限制，則給出提示信息。示例代碼如下：

var maxFileSize = 1024 * 1024; // 設定最大文件大小爲1MB
if (fileSize > maxFileSize) {
  alert('請上傳小於1MB的文件！');
  return false;
} else {
  alert('文件大小符合要求！');
  return true;
}

示例一：禁止上傳超過1MB的文件

以下是一個完整的示例，使用上述方法來控制上傳文件的大小，禁止上傳超過1MB的文件。

HTML 代碼：

<form>
  <input type="file" name="myFile" id="myFileInput">
  <br><br>
  <input type="submit" onclick="return checkFileSize();" value="上傳">
</form>

JavaScript 代碼：

function checkFileSize() {
  var fileInput = document.getElementById('myFileInput');
  var fileSize = fileInput.files[0].size; // 獲取文件的大小
  var maxFileSize = 1024 * 1024; // 設定最大文件大小爲1MB
  if (fileSize > maxFileSize) {
    alert('請上傳小於1MB的文件！');
    return false;
  } else {
    alert('文件大小符合要求！');
    return true;
  }
}

示例二：限制上傳文件大小的提示和樣式

以下是另一個完整示例，使用上述方法來限制上傳文件的大小，並在上傳按鈕旁邊顯示提示信息和樣式。

HTML 代碼：

<form>
  <label for="myFileInput">上傳文件：</label>
  <input type="file" name="myFile" id="myFileInput">
  <span id="fileSizeMsg"></span>
  <br><br>
  <input type="submit" id="submitBtn" value="上傳" disabled>
</form>

CSS 代碼：

#fileSizeMsg {
  margin-left: 10px;
  font-size: 12px;
  color: red;
}

JavaScript 代碼：

var fileInput = document.getElementById('myFileInput');
var fileSizeMsg = document.getElementById('fileSizeMsg');
var submitBtn = document.getElementById('submitBtn');
var maxFileSize = 1024 * 1024; // 設定最大文件大小爲1MB

fileInput.addEventListener('change', function () {
  var fileSize = fileInput.files[0].size; // 獲取文件的大小
  if (fileSize > maxFileSize) {
    fileSizeMsg.innerText = '文件大小超過限制！';
    submitBtn.disabled = true;
  } else {
    fileSizeMsg.innerText = '';
    submitBtn.disabled = false;
  }
});

以上兩個示例都可以實現上傳文件大小的控制，第一個示例簡單直觀，第二個示例則加入了提示信息和樣式，並且只有選擇了合法大小的文件，上傳按鈕才能被點擊。根據實際需要選擇使用即可。