文件上传功能（控制文件类型、多文件上传、获取文件内容及文件名称）

本文链接：https://blog.youkuaiyun.com/Baymini0801/article/details/80110113

本文介绍了一个HTML文件上传组件的设计与实现，包括文件选择、显示已选文件名等功能，并集成了Font Awesome图标库、jQuery和Bootstrap等技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分

<p class="txt-content-title"><span>文件上传：</span></p>
<form method="post" name="Form2" id="Form2" enctype="multipart/form-data">
<label class="file-input file-multiple">
    <input multiple="multiple" type="file" name="file" id="shapefilelist" accept=".shp">
    <span class="file-container" id="content" data-title="文件上传">
        <span class="file-name" data-title="">
        <i class="icon fa fa-cloud-upload"></i>
        </span>
    </span>
</label>

</form>

<p class="txt-content-title"><span>内容：</span></p>
<div style="border: 1px dashed #91bae4;margin:5px 14px;min-height: 60px;max-height: 500px;">
<ul id="txTree" class="ztree" style="overflow:auto;"></ul>
</div>

css部分

/*文件导入样式 */
.file-multiple {
height: auto;
}
.file-input {
display: block;
font-size: inherit;
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 0){.file-input input[type=file] {
position: absolute;
width: 0;
height: 0;
}}
.file-input input[type=file]{
position: absolute;
z-index: -999;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
}
.file-multiple .file-container {
position: relative;
height: auto;
border: 1px dashed #aaaaaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
}
.file-input .file-container {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 112px;
background-color: #ffffff;
border: 1px solid #d5d5d5;
cursor: pointer;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.15s;
-o-transition: all 0.15s;
transition: all 0.15s;
}
.file-multiple .file-container:before {
display: inline-block;
content: attr(data-title);
position: relative;
right: 0;
left: 0;
margin: 12px;
line-height: 22px;
background-color: #FFF;
color: #CCC;
font-size: 18px;
font-weight: bold;
border-width: 0;
}
.file-input .file-container:before {
display: inline-block;
content: attr(data-title);
position: absolute;
right: 0;
top: 0;
bottom: 0;
line-height: 24px;
text-align: center;
padding: 0 8px;
color: #888;
font-size: 11px;
font-weight: bold;
border: 2px solid #FFF;
border-left-width: 4px;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.file-multiple .file-container .file-name:last-child {
border-bottom-width: 0;
margin-bottom: 1px;
}
.file-input .file-container.selected .file-name {
color: #666666;
top: 0px;
}
.file-input .file-container .file-name {
display: inline-block;
height: 65px;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
line-height: 28px;
color: #888888;
font-size: 13px;
vertical-align: top;
position: static;
padding-left: 5px;
}
.file-multiple .file-container .file-name {
position: relative;
display: block;
padding: 0;
height: auto;
width: auto;
max-width: 100%;
margin: 0 4px;
text-align: left;
top: 30px;
}
.file-multiple .file-container .file-name .icon {
position: relative;
display: block;
text-align: center;
height: auto;
line-height: 64px;
width: auto;
font-size: 64px;
color: #D5D5D5;
margin: 4px 0;
background-color: transparent;
left: 0px;
}
.file-input .file-container .icon {
display: inline-block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
line-height: 24px;
width: 26px;
text-align: center;
font-family: FontAwesome;
font-size: 13px;
border: 2px solid #FFF;
color: #FFF;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
background-color: #d1d1d1;
}

.file-input .file-container.selected {
right: 16px;
height: auto;
width: 92%;
margin-left: 4%;
}
.file-multiple .file-container {
position: relative;
height: 105px;
border: 1px dashed #aaaaaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
width: 92%;
margin-left: 4%;
}

.file-multiple .file-container.selected .file-name .icon {
display: inline-block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
line-height: 24px;
width: 26px;
text-align: center;
font-family: FontAwesome;
font-size: 13px;
border: 2px solid #FFF;
color: #FFF;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.file-multiple .file-container.selected .file-name .icon {
position: relative;
margin-right: 4px;
margin-left: 2px;
line-height: 24px;
}
.file-input .file-container.selected .file-name .icon {
background-color: #efad62;
}
.file-multiple .file-container.selected .file-name:after {
display: inline-block;
white-space: pre;
}
.file-multiple .file-container .file-name:after {
display: none;
}
.file-input .file-container .file-name:after {
display: inline-block;
content: attr(data-title);

}

/*标题部分 */
.txt-content-title{
/* background-color: #f5f5f5; */
background-color:#f1f1f1;
color: #333;
font-weight: 600;
font-size: 14px;
margin: 0;
margin-bottom: 8px;
height: 30px;
border-left: 5px solid #004ca8;
line-height: 32px;
}
.txt-content-title span{
margin-left:15px;

}

.txt-content-textarea{
font-size: 16px;
color: #888;
margin-left: 2px;
}
.content-box{
border: 1px dashed #91bae4;
min-height: 60px;
width:94%;
margin-left:3%;
}
#txtContent{
width: 100%;
height: 280px;
border: none;
background-color:#fbfbfb;
color: #333;
font-size: 14px;
resize:none;
}

script部分：

//文件导入
//导入文件
var arr=[];
var result="";
var test = document.getElementById('shapefilelist');
test.addEventListener('change', function() {
$(".file-container").addClass("hide-placeholder selected")
$(".file-container").attr("data-title","");
$(".remove").addClass("active");
var t_files = this.files;
for(var i = 0; i < t_files.length; i++){
//读取文件名称
arr.push(t_files[i].name);
//读取文件内容
var reader = new FileReader();
reader.readAsText(t_files[i],"GBK");
reader.onload = function()
{
result+=this.result;
$("#txtContent").val(result);
};
}

var str = '';
for (var i = 0; i < arr.length; i++) {
str+= '<span class="file-name" data-title="'+arr[i]+'"><i class="icon fa fa-file"></i></span>';
}
document.getElementById('content').innerHTML = str;
}, false);

需要导入的文件：

1、fontawesome字体图标库，

2、jquery，

3、bootstrap（css及js），

备注：项目中自用，仅供参考

我所坚持的，我信奉永不言弃，我所放弃的，我信奉放弃是另一种拥有——Baymini