浏览器兼容多文件上传控件

最新推荐文章于 2022-11-28 12:00:10 发布

置顶 daisyliys

最新推荐文章于 2022-11-28 12:00:10 发布

阅读量3.1k

点赞数

分类专栏：前端自定义控件文章标签：多文件上传控件浏览器兼容自定义控件

本文链接：https://blog.csdn.net/daisyliys/article/details/50365591

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

自定义控件

1 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/fileUpload.css">
<title>浏览器兼容多文件上传控件</title>
</head>

<body>
<br>
<form class="fileBox" action="" method="post" enctype="multipart/form-data">
  <input type="button" name="add" class="btn add" value="新增"  />
  <br>
  <div class="inputGroup-contener">
      <div class="inputGroup">
      <br>
      <!--自定义按钮，点击触发原生控件-->
      <input type="text" name="textField" class="textField"/>
      <input type="button" class="btn viewBtn fieldBtn" value="浏览" />
      <!--原生按钮控件，透明化覆盖在自定义按钮上方-->
      <input type="file" name="fileField" class="fileField" limitType="*.png">
      <input type="button" name="clean" class="btn cleanBtn" value="x" />
     
      <br>
      </div> 
   </div>
</form>
</body>
<script src="js/jquery.js"></script>
<script src="js/fileUpload.js"></script>
</html>

fileUpload.css

@charset "utf-8";
/* CSS Document */
.fileBox {
  display:block;
  width:250px;
}
.inputGroup{
  position:relative;
  height:20px;
  margin-top:4px;
}
.fileBox .textField{ 
  position:absolute;
  top:0px;
  left:0px;
  height:16px;
  width:163px;
  border:1px solid #cdcdcd;
}
.viewBtn {
  position:absolute;
  top:0px;
  left:165px;
}
.cleanBtn {
  position:absolute;
  width:20px!important;
  top:0px;
  left:145px;
  display: none;
border:1px solid #cdcdcd!important;
  color:#999;
}
.removeBtn {
  position:absolute;
  top:0px;
  left:207px;
}
.fileBox .btn{
  background-color:#ebedf2;
  border:1px solid #929292;
  height:20px; 
  width:40px;
  line-height:20px;
  cursor: pointer;
}
.fileBox .btn:hover,.fileBox .btnHover
{ background-color:#d8e8fa; border:1px solid #8cb2e2;}
.fileBox .fileField { 
  position:absolute;
  top:0;
  left:0;
  height:22px;
  width:207px;
  filter:alapha(opicity:0); /*原生控件透明*/
  opacity:0;
  cursor:pointer;
}

fileUpload.js

/*新增上传控件*/
$(".add").click(function(){
	var fileUpLoadCode = '<div class="inputGroup"><br><input type="text" name="textField" class="textField" /><input type="button" class="btn viewBtn fieldBtn" value="浏览" /><input type="file" name="fileField" class="fileField" limiType="*.png"><input type="button" name="clean" class="btn cleanBtn" value="x" /><input type="button" name="remove" class="btn removeBtn" value="删除" /><br></div> ';
	$(".inputGroup-contener").append(fileUpLoadCode);
});
/*清空原生控件值和自定义控件值*/
$(".cleanBtn").live("click",function(e){
	var file= $(this).parent().find(".fileField");
	file.after(file.clone().val(""));
	file.remove();
	$(this).parent().find(".textField").val("");
	$(this).hide();
  });
 /*删除新增的上传控件*/
$(".removeBtn").live("click",function(e){
	var group= $(this).parent();
	group.remove();
  });
/*清空原生控件值和自定义控件值*/
$(".fileField").live("mouseover",function(e){$(this).parent().find(".fieldBtn").addClass("btnHover");});
$(".fileField").live("mouseout",function(e){$(this).parent().find(".fieldBtn").removeClass("btnHover");});
/*将原生控件值传给自定义输入框*/
$(".fileField").live("change",function(e){
    var val=$(this).parent().find(".fileField").val();
    $(this).parent().find(".textField").attr("value",val);
	$(this).parent().find(".cleanBtn").show();
  });

ps.浏览器兼容样式参考网上教程。