在HTML和JavaScript中，数据转移和输入类型=file问题涉及到以下几个方面：
（图片来源网络，侵删）
1、文件上传
2、文件预览
3、文件类型限制
4、文件大小限制
5、文件名处理
下面分别对这些方面进行详细介绍。
文件上传
在HTML中，可以使用<input>标签的type="file"属性来实现文件上传功能，当用户选择文件后，可以通过JavaScript获取到用户选择的文件信息。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
</head>
<body>
<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
console.log('文件名：', file.name);
console.log('文件大小：', file.size);
console.log('文件类型：', file.type);
});
</script>
</body>
</html>
文件预览
在HTML中，可以使用<img>标签的src属性来预览图片文件，对于其他类型的文件，可以使用第三方库（如FileReader）来读取文件内容并显示。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>文件预览</title>
</head>
<body>
<input type="file" id="fileInput">
<img id="preview" src="" alt="预览图">
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').src = e.target.result;
}
reader.readAsDataURL(file);
});
</script>
</body>
</html>
文件类型限制
在HTML中，可以使用accept属性来限制用户只能选择特定类型的文件，只允许用户选择图片文件，可以设置accept="image/*"。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>文件类型限制</title>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
console.log('文件名：', file.name);
console.log('文件大小：', file.size);
console.log('文件类型：', file.type);
});
</script>
</body>
</html>
文件大小限制
在HTML中，可以使用maxsize属性来限制用户选择的文件大小，只允许用户选择不超过1MB的文件，可以设置maxsize="1MB"，需要注意的是，这里的单位是字节（B）。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>文件大小限制</title>
</head>
<body>
<input type="file" id="fileInput" maxsize="1MB">
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
console.log('文件名：', file.name);
console.log('文件大小：', file.size);
console.log('文件类型：', file.type);
});
</script>
</body>
</html>
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477440.html
微信扫一扫