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

HTML部分

文件上传：                                                      内容：

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+= '';       }       document.getElementById('content').innerHTML = str;         }, false);

需要导入的文件：

1、fontawesome字体图标库， 2、jquery， 3、bootstrap（css及js）， 备注：项目中自用，仅供参考

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