作者:shidainetwork | 来源:互联网 | 2024-12-05 17:03
HTML提供了`type=file`的input元素用于文件上传功能,但其默认样式较为简陋。本文探讨了如何利用原生JavaScript结合layui和bootstrap的样式来美化文件上传按钮,提升用户体验。
HTML 中的 input type=file
是常用的文件上传方式,但其默认样式可能不符合现代网页设计的需求。为了改善这一点,开发者通常会寻找第三方库如 layui 或 bootstrap 来美化上传按钮。然而,这些库有时可能过于庞大或与现有项目不兼容。
下面是一个使用原生 Javascript 实现的文件上传按钮示例,同时借鉴了 layui 的 CSS 样式以增强视觉效果:
通过隐藏实际的文件输入框,并使用自定义按钮触发其点击事件,可以实现更加美观的上传界面。具体实现如下:
这段 HTML 代码中,input type=file
被设置为不可见,而自定义的上传按钮则通过 Javascript 触发文件选择对话框的打开。以下是相关的 Javascript 代码:
var inputBox = document.getElementById("file-input");
function selectFile(){
inputBox.click();
}
当用户点击“上传”按钮时,实际上触发的是隐藏的文件输入框的点击事件,从而打开了文件选择对话框。一旦用户选择了文件,绑定到 input
元素上的 onchange
事件将被触发,执行文件上传操作。具体的上传逻辑如下所示:
function upload(){
var file = inputBox.files[0];
if (!file) {
alert('请选择文件');
return;
}
var form = new FormData();
form.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('post', '../../api/receiveOptionQuestion', true);
xhr.Onload= function () {
alert(xhr.responseText);
};
xhr.upload.addEventListener('progress', function(e){
console.log(e.loaded / e.total * 100 + '%');
}, false);
xhr.send(form);
}
在这个函数中,首先检查是否有文件被选中,然后创建一个新的 FormData
对象并将文件添加进去。接着,使用 XMLHttpRequest
发送 POST 请求到指定的服务器端点。为了提供更好的用户体验,还添加了一个进度监听器,用于显示文件上传的进度。