工作记录：Form表单上传控件美化与上传文件类型限制

最新推荐文章于 2022-09-01 10:25:09 发布

zhengshuiguang

最新推荐文章于 2022-09-01 10:25:09 发布

阅读量732

点赞数

分类专栏： javascript+css 文章标签： form 上传表单美化文件类型

本文链接：https://blog.csdn.net/zhengshuiguang/article/details/40890399

版权

javascript+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天准备写一个用php校正被urlencode之后的多文件修复程序，需要用户上传文件夹，查阅资料发现除了各大网盘编写的控件可以上传文件夹可以达到效果，一般情况只能将文件夹压缩成zip压缩包，然后再后端用php解包再遍历目录。很快，写好了一个上传界面，但是在各个浏览器下样式完全不同，原来以chrome、firefox、IE都有自己独特的input[type=file]样式，于是对这三种浏览器做了兼容，写了如下html代码进行美化：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传表单美化</title>
<style type="text/css">
<!--
body{margin:0;padding:0}#upload-file{position:absolute;left:0;width:250px;top:0;height:28px;opacity:0;cursor:pointer;display:none}#viewfile{border:1px solid #BEBEBE;width:200px;margin-right:5px;float:left;height:20px;padding:2px;line-height:22px;background:#FFF;z-index:99}.upload-section{position:relative;margin:10px auto;width:350px;text-align:left}.display-section{display:block}.display-section a{display:inline-block;padding:0 14px;height:24px;line-height:25px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:normal;text-align:center;overflow:hidden;outline:0;background-color:#388bff;border:1px solid #4D90BB;border-color:#3c8dff #408ffe #3680e6;color:white;text-decoration:none}.display-section a:hover{border-color:#2678ec #2575e7 #1c6fe2 #2677e7;background-color:#388bff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAMAAACuX0YVAAAABlBMVEVnpv85i/9PO5r4AAAAD0lEQVR42gEEAPv/AAAAAQAFAAIros7PAAAAAElFTkSuQmCC);background-repeat:repeat-x;box-shadow:1px 1px 1px rgba(0,0,0,0.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.4);-o-box-shadow:1px 1px 1px rgba(0,0,0,0.4)}
-->
</style>
</head>
<body>
	<div class="upload-section">
		<form method="post" id="form-test" name="form-test" action="" enctype="multipart/form-data">
			<div class="display-section">
				<input name="display-text" type="text" id="viewfile" readonly="readonly" οndblclick="document.getElementById('upload-file').click()"/>
				<a href="javascript:void(0);" id="file_button" οnclick="document.getElementById('upload-file').click();return false;">浏览</a>
				<a href="javascript:void(0);" id="submit_button" οnclick="checkForm();return false;">提交</a>
			</div>
			<input type="file" id="upload-file" name="upload-file" οnchange="document.getElementById('viewfile').value=this.value;" accept="image/jpg,image/jpeg"/>
		</form>
    </div>
	<script type="text/javascript">
		function checkForm(){
			//检测文件类型
			var allowSubmit = false;
			var extArray = new Array('.jpg', '.jpeg');
			var form = document.getElementById('form-test');
			var filename = document.getElementById('upload-file').value;
			for (var i = 0; i < extArray.length; i++) {
				if(filename.split('').reverse().join('').indexOf(extArray[i].split('').reverse().join('')) === 0) {
					allowSubmit = true;
					break;
				}
			}
			if(allowSubmit){
				form.submit();
			}else{
				alert('您上传的文件后缀必须是'+extArray.join(',')+'文件');
			}
		}
	</script>
</body>
</html>

其中原本想对input[type=file]的文件类型做了限制仅在chrome下生效，并且不是完全有效，只是针对常用的几种格式有效，如aplication/zip无法识别，只好在js中判断后缀名进行检测，但是对于安全性要求比较高的还是需要在后端进行MIME验证。

php端的文件修复程序已经完成，现在处于测试阶段，以后用MozillaCacheView拿html5游戏再也不用担心中文文件名乱码的问题了。

zhengshuiguang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
工作记录：Form表单上传控件美化与上传文件类型限制

今天准备写一个用php校正被urlencode之后的多文件修复程序，需要用户上传文件夹，查阅资料发现除了各大网盘编写的控件可以上传文件夹可以达到效果，一般情况只能将文件夹压缩成zip压缩包，然后再后端用php解包再遍历目录。很快，写好了一个上传界面，但是在各个浏览器下样式完全不同，原来以chrome、firefox、IE都有自己独特的input[type=file]样式，于是对这三种浏览器做了兼容
复制链接

扫一扫