下面是完整的“js 实现 input type="file" 文件上传示例代码”的攻略。
1. input type="file" 介绍
<input type="file"> 用于在 Web 页面中选择文件上传。
这个元素通常与表单一起使用，以便将其数据提交给服务器。当一个表单包含文件上传控件时，表单的编码类型必须是 multipart/form-data，而且就算 form 没有提交，用户也可以使用该元素来选取本地计算机上的一个文件。
2. 实现 input type="file" 文件上传
2.1 html 代码
<form action="http://example.com/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">上传</button>
</form>
<input type="file" name="file"> 表示一个文件上传控件，name 属性指定上传文件的参数名。
2.2 基本上传示例
<!DOCTYPE html>
<html>
<head>
<title>文件上传示例</title>
</head>
<body>
<form action="http://example.com/upload.php" method="post" enctype="multipart/form-data">
选择文件: <input type="file" name="file"><br/><br/>
<input type="submit" value="上传">
</form>
</body>
</html>
在这个示例中，我们创建了一个表单，该表单包含一个 input type="file" 输入框和一个提交按钮，当用户选择文件并点击提交按钮时，表单的数据被发送到指定的 URL。
2.3 使用 AJAX 实现异步上传
我们可以使用 AJAX 技术实现异步上传，避免页面刷新和重新加载。
<!DOCTYPE html>
<html>
<head>
<title>AJAX 文件上传示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$('button[type="submit"]').click(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'http://example.com/upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
alert('上传成功！');
}
});
});
});
</script>
</head>
<body>
<form>
选择文件: <input type="file" name="file"><br/><br/>
<button type="submit">上传</button>
</form>
</body>
</html>
在这个示例中，我们监听表单的 submit 事件，并把 input type="file" 的输入框添加到 FormData 对象中，然后使用 AJAX 发送数据到指定的 URL。在成功响应时，弹出上传成功的提示。
总结
本文介绍了如何使用 input type="file" 实现文件上传，同时还讲解了如何使用 AJAX 技术实现异步上传。实际上，这只是文件上传的一个基本示例，真正的文件上传应该考虑到安全性，对上传的文件类型、大小、数量等进行限制和验证。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js 实现 input type=”file” 文件上传示例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 