显示文件名和表格数 [英] display file name with number of forms
问题描述
我在一页上有许多表格,每个表格都有一个文件输入.当用户选择文件时,我想在相关表格内的<span class="fileNameBox"></span>
中打印所选文件的名称.
I have number of forms on a page and each one has a file input. When the user chooses a file, I would like to print the name of the selected file in the <span class="fileNameBox"></span>
that is inside the relevant form.
我使用的是"photoIconOn.png"图像,而不是文件上传器的输入字段.
为什么总是以第一种形式/class ="fileNameBox"打印文件名?
Why does it always print the file's name in the first form / class="fileNameBox" ?
JS:
<script>
$(function() {
$('input.file-field').on('change', function(e) {
var files = this.files,
filename = files[0].name;
$(this).closest('form').find('.fileNameBox').html(filename);
});
});
</script>
HTML:
HTML:
<div class="form-group">
<label class="col-xs-2 control-label" >תוכן</label>
<div class="col-md-8 col-xs-12">
<textarea class="form-control comment-field" name="comment[text]" rows="1" ></textarea>
<span class="fileNameBox"></span>
<input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' id="uploadFile" style="display: none"/>
</div>
<label class="col-md-1 col-xs-1 control-label" for="uploadFile">
<img src="images/photoIconOn.png" alt="" class="uploadFileImg"/>
</label>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="textinput"></label>
<div class="col-md-8 col-xs-12">
<button class="btn btn-primary submit" >SEND</button>
</div>
</div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-xs-2 control-label" >תוכן</label>
<div class="col-md-8 col-xs-12">
<textarea class="form-control comment-field" name="comment[text]" rows="1" ></textarea>
<span class="fileNameBox"></span>
<input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' id="uploadFile" style="display: none"/>
</div>
<label class="col-md-1 col-xs-1 control-label" for="uploadFile">
<img src="images/photoIconOn.png" alt="" class="uploadFileImg"/>
</label>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="textinput"></label>
<div class="col-md-8 col-xs-12">
<button class="btn btn-primary submit" >SEND</button>
</div>
</div>
</form>
推荐答案
好吧,我将回答这个问题,尽管您的工作应该可以进行. 我将您的代码复制并粘贴到小提琴中,一切正常.我唯一更改的是如何获取文件名,因为隐藏文件输入时您不是这样做的.
Well, I am going to answer this, though what you have should be working. I copy and pasted your code into a fiddle and everything works. The only thing I changed was how I got the filename since I don't how you are doing it while hiding the file input.
这是一个小提琴 https://jsfiddle.net/L5gu9vhL/1/
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-xs-2 control-label" ></label>
<div class="col-md-8 col-xs-12">
<span class="fileNameBox"></span>
<input type='file' name='file[]' class='file-field' id="myid"/>
</div>
<label class="col-md-1 col-xs-1 control-label" for="uploadFile">
<img src="images/photoIconOn.png" alt="" class="uploadFileImg"/>
</label>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="textinput"></label>
<div class="col-md-8 col-xs-12">
<button class="btn btn-primary submit" >SEND</button>
</div>
</div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-xs-2 control-label" ></label>
<div class="col-md-8 col-xs-12">
<span class="fileNameBox"></span>
<input type='file' name='file[]' class='file-field' id="myid"/>
</div>
<label class="col-md-1 col-xs-1 control-label" for="uploadFile">
<img src="images/photoIconOn.png" alt="" class="uploadFileImg"/>
</label>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="textinput"></label>
<div class="col-md-8 col-xs-12">
<button class="btn btn-primary submit" >SEND</button>
</div>
</div>
</form>
jQuery
$(function() {
$('input.file-field').on('change', function(e) {
var filename = $(this).val();
$(this).closest('form').find('.fileNameBox').html(filename);
});
});
这篇关于显示文件名和表格数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!