js實現單檔案上傳
阿新 • • 發佈:2020-12-16
html
<div class="col-sm-6"> <div class="col-sm-12 xz-box"> <button class="form-control ajbl-btn">選擇檔案</button> <input type="file" class="col-sm-12 form-control ajbl-choose" style="opacity: 0;" /> </div> <ul class="col-sm-12"></ul> </div>
css
.scwj{ height: 34px; line-height: 34px; margin-bottom: 0; text-align: right; } .ajbl-btn{ position: absolute; left: 0; top: 0; border: none; background: #5671e6; color: #FFFFFF; z-index: 1; border-radius: 2px; } .ajbl-btn:focus{ box-shadow: none; } .work-box-ul4{ margin-top: 10px; } .xz-box{ position: relative; height: 34px; } .ajbl-choose { position: absolute; left: 0; top: 0; border: none; background: #456df0; color: #FFFFFF; z-index: 2; } .fj-shows{ line-height: 28px; } .xzfiles-show{ display: block!important; max-height: 200px; overflow: auto; } .xzfiles-show li{ position: relative; width: 100%; line-height: 20px; padding: 10px; } .xzfiles-show li:hover{ background: #f6f9fd; } .xzfiles-show li:hover img{ display: inline-block; } .xzfiles-show li i img{ position: absolute; right: 10px; top: 50%; margin-top: -6px; display: none; vertical-align: middle; } .typepic{ margin-right: 5px; }
js
<script type="text/javascript"> var fileNum = 0; function fileChange(obj) { var files = obj.files; if(files.length > 0) { fileNum++; var fileName = files[0].name; var spanText = '<li>' + '</i>' + '<span for="file' + fileNum + '">' + fileName + '</span>' + '<i style="padding: 0 10px;font-style:normal;" class="closed"><img src="../../assets/images/fa-img-del.png" /></i>' + '<br>' + '</li>' var inputHide = '<input type="file" id="file' + fileNum + '" value="" />'; $(".xzfiles-show").append(spanText); $(".xzfiles-show .del-file").removeClass("none"); $(".hide-box").append(inputHide); } else { $(".xzfiles-show").text(""); $(".xzfiles-show .del-file").addClass("none"); } } //刪除附件 $(document).on('click', '.closed', function() { this.parentElement.remove(); var delFileid = this.previousElementSibling.getAttribute("for"); document.getElementById("delFileid"); document.getElementById(delFileid).remove(); }) </script>