前端上传文件相关HTML

2019/09/17 15:22 Web 极四维博客 5628 0
😂 这篇文章最后更新于1683天前，您需要注意相关的内容是否还可用。

场景，点选择文件，能在输入框显示所上传的文件名，第一想到的是原生的表单元素，如下：

<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>

声明：本文由极四维博客发布，如需转载请注明出处。