<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<!--自定义html组件，触发文件上传对话窗口的打开-->
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" οnclick="getFile()">
Click to upload!
</div>
<!--将文件选择的input隐藏-->
<div style="display: none">
<input id="upfile" type="file" value="upload"/>
</div>
</body>
<script>
//触发 文件上传组件的 click 事件 ， 打开文件上传的对话窗口
document.getElementById("yourBtn").onclick = function () {
document.getElementById("upfile").click();
};
//文件上传
document.getElementById("upfile").onchange = function () {
var url = '';
var xhr = new XMLHttpRequest();
// html5 的 form ap
这篇博客介绍了如何使用HTML5实现自定义文件上传功能。通过创建一个点击触发文件选择对话框的按钮，结合JavaScript监听事件，当用户选择文件后，使用FormData对象和XMLHttpRequest异步POST上传文件。当文件上传成功时，会显示提示信息。
最低0.47元/天 解锁文章
扫一扫
4052
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
