-极四维博客

前端上传文件相关HTML

场景，点选择文件，能在输入框显示所上传的文件名，第一想到的是原生的表单元素，如下：<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script> $(function() { $("#wenjian").change(function() { $("#text").val($("#wenjian").val()); }); $("#browser").click(function() { $("#wenjian").click(); }); });</script><input type="text" id="text" /><input type="file" id="wenjian" class="file" style="display: none;" /><input type='button' class='btn' value='浏览...' id="browser" />原生文件输入框“选择文件”按钮后会显示“未选择任何文件”等的文字，这因浏览器而异。于是只能隐藏而使用额外按钮去调用上传文件按钮，原生上传按钮隐藏，以上为jq版本，下方为js版本。<div class="button operating-button" id="fileUpdate-button">从Excel中批量导入</div><form action="" id ="fileUpdate-form"> <input type="file" name="filename" id="fileUpdate-input" style="display: none" /></form><script type="text/javascript"> //上传文件处理 var fileUpdate_button = document.getElementById("fileUpdate-button"); var fileUpdate_input = document.getElementById("fileUpdate-input"); var fileUpdate_form = document.getElementById("fileUpdate-form"); fileUpdate_button.onclick = function () { fileUpdate_input.click(); } fileUpdate_input.onchange = function () { fileUpdate_form.submit(); }</script>另一种，通过CSS控制，让文件输入框隐藏，但是作用范围变大，即隐藏在文本输入框与按钮下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定义input type="file" 的样式</title> <style type="text/css"> body { font-size: 14px; } input { vertical-align: middle; margin: 0; padding: 0 } .file-box { position: relative; width: 340px } .txt { height: 22px; border: 1px solid #cdcdcd; width: 180px; } .btn { background-color: #FFF; border: 1px solid #CDCDCD; height: 24px; width: 70px; } .file { position: absolute; top: 0; right: 80px; height: 24px; filter: alpha(opacity:0); opacity: 0; width: 260px } </style> </head> <body> <div class="file-box"> <form action="" method="post" enctype="multipart/form-data"> <input type='text' name='textfield' id='textfield' class='txt' /> <input type='button' class='btn' value='浏览...' /> <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="上传" /> </form> </div> </body>

2019/09/17 15:22 5627 0

一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

前端上传文件相关HTML

搜索

控制面板

最新留言

文章归档