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;
  }
});

以上两个示例都可以实现上传文件大小的控制，第一个示例简单直观，第二个示例则加入了提示信息和样式，并且只有选择了合法大小的文件，上传按钮才能被点击。根据实际需要选择使用即可。