关键词

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

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

本文链接:http://task.lmcjl.com/news/10094.html

展开阅读全文