JavaScript 可以检测文件的大小,以控制上传文件的大小。以下是检查文件大小的完整攻略:
首先,在HTML中使用 <input>
元素生成上传文件的按钮,代码如下:
<input type="file" name="myFile" id="myFileInput">
使用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的文件。
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