代码之家  ›  专栏  ›  技术社区  ›  Tushar Kumawat

当我使用多个文件上传字段时,它不起作用

jquery-file-upload file-upload jquery javascript
  •  1
  • Tushar Kumawat  · 技术社区  · 7 年前

    当我在一个页面中使用单个文件上传时,它工作正常,但当我在一个页面中使用多个字段时,它不工作。我想通过类和动态来解决问题 id 我不想在一页上花太多时间如果有人知道,请告诉我。

    代码url: 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 回复  |  直到 7 年前
        1
  •  2
  •   yunzen    7 年前 

    $('.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>
        2
  •  1
  •   Marius    7 年前 

    $('.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>
    推荐文章
    Scott-MEARN-Developer  ·  FileReader()以角度返回未定义和伪路径
    3 年前
    Lamberto Fredrick Nababan  ·  PHP/MySQL-在执行单个上载时输入两次数据
    8 年前
    Wai Yan Hein  ·  上传时,Laravel正在旋转图像
    8 年前
    Chris  ·  要在chrome中添加哪个标志才能不看到c:/fakepath
    8 年前
    Yu.Pan  ·  如何上载文件夹或找到替换文件夹的方法
    8 年前
    Karma Blackshaw  ·  文件输入类型的未定义索引[重复]
    8 年前
    TheSwiftGuy77  ·  使用Swift 4将Pdf、Docx和图像文件上载到服务器
    8 年前
    acb1980  ·  上次更新后,Safari(iOS和OS X)上的Ajax文件上传中断
    8 年前
    Marcus Grass  ·  Django将文件保存到磁盘文件夹的最简单方法,无需使用模型
    8 年前
    ahmed  ·  使用Mysql在php//中上载图像时无法打开流
    8 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号