当我使用多个文件上传功能时，该字段不起作用

时间：2018-11-26 10:18:44

标签： javascript jquery file-upload jquery-file-upload

当我在页面中使用单个文件上传时，工作正常，但是当我在页面中使用多个字段时，则无法工作。我想按类和动态id解决方案，如果有人知道，我不想在页面上花费太多时间，请告诉我。

代码网址：https://codepen.io/tushar-kumawat/pen/WYyKYG

这是JavaScript代码：

$('#chooseFile').bind('change', function () {
    var filename = $("#chooseFile").val();
    if (/^\s*$/.test(filename)) {
        $(".file-upload").removeClass('active');
        $("#noFile").text("No file chosen..."); 
    } else {
        $(".file-upload").addClass('active');
        $("#noFile").text(filename.replace("C:\\fakepath\\", "")); 
    }
});

2 个答案:

答案 0 :(得分：2)

$('.chooseFile, .chooseFile2').bind('change', function () {
  var filename = $(this).val();
  var $Upload = $(this).closest(".file-upload");
  if (/^\s*$/.test(filename)) {
    $Upload.removeClass('active');
    $(".file-select-name", $Upload).text("No file chosen..."); 
  }
  else {
    $Upload.addClass('active');
    $(".file-select-name", $Upload).text(filename.replace("C:\\fakepath\\", "")); 
  }
});
/****** IGNORE ******/
body { 
  width: 400px; 
  margin: 100px auto; 
  background-color: #f5f5f5; 
}

.copyright {
  display:block;
  margin-top: 100px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.copyright a{
  text-decoration: none;
  color: #EE4E44;
}


/****** CODE ******/
.file-upload {
	display: block;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
}

.file-upload .file-select {
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select .file-select-button {
	background: #dce4ec;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}

.file-upload .file-select:hover {
	border-color: #34495e;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select:hover .file-select-button {
	background: #34495e;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select {
	border-color: #3fa46a;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select .file-select-button {
	background: #3fa46a;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select input[type=file] {
	z-index: 100;
	cursor: pointer;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}

.file-upload .file-select.file-select-disabled {
	opacity: 0.65;
}

.file-upload .file-select.file-select-disabled:hover {
	cursor: default;
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	margin-top: 5px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select.file-select-disabled:hover .file-select-button {
	background: #dce4ec;
	color: #666666;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select.file-select-disabled:hover .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile">
  </div>
</div>

<br>
<br>
<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile2">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile2">
  </div>
</div>

答案 1 :(得分：1)

$('.chooseFile, .chooseFile2').bind('change', function () {
  var filename = $(this).val();  
  if (!filename) {
    $(this.parentElement.parentElement).removeClass('active');
    $(this.parentElement.querySelector(".file-select-name")).text("No file chosen..."); 
  }
  else {
    $(this.parentElement.parentElement).addClass('active');
    $(this.parentElement.querySelector(".file-select-name")).text(filename.replace("C:\\fakepath\\", "")); 
  }
});
/****** IGNORE ******/
body { 
  width: 400px; 
  margin: 100px auto; 
  background-color: #f5f5f5; 
}

.copyright {
  display:block;
  margin-top: 100px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.copyright a{
  text-decoration: none;
  color: #EE4E44;
}


/****** CODE ******/
.file-upload {
	display: block;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
}

.file-upload .file-select {
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select .file-select-button {
	background: #dce4ec;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}

.file-upload .file-select:hover {
	border-color: #34495e;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select:hover .file-select-button {
	background: #34495e;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select {
	border-color: #3fa46a;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select .file-select-button {
	background: #3fa46a;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select input[type=file] {
	z-index: 100;
	cursor: pointer;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}

.file-upload .file-select.file-select-disabled {
	opacity: 0.65;
}

.file-upload .file-select.file-select-disabled:hover {
	cursor: default;
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	margin-top: 5px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select.file-select-disabled:hover .file-select-button {
	background: #dce4ec;
	color: #666666;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select.file-select-disabled:hover .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile">
  </div>
</div>

<br>
<br>
<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile2">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile2">
  </div>
</div>

相关问题
最新问题