如何使用变量值 jquery 更改范围标签值

Question

我想用变量值jquery更改span标签元素中的值

我有如下代码

<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf" style="display:none;"></span>

我有这样的j查询

$str = $("#fileInput").val();
$splt = $str.split(".");
$('#pdf').text('Your Extension is'.$splt[1]);

为什么它不起作用？

Answer 1

$('#fileInput').change(function() {
$str = $("#fileInput").val();
$splt = $str.split(".");
$('#pdf').html('Your Extension is ' + $splt[1]);
});

Answer 2

你连接你的变量是错误的。您需要添加一个 + 并将点放在括号内。此外显示：无隐藏结果。

JSFiddle

.html

<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf"></span>

js/jQuery

$("#fileInput").change(function(){
$str = $("#fileInput").val();
$splt = $str.split(".");
$('#pdf').text('Your Extension is .'+$splt[1]);
});

Answer 3

如果文件名部分包含点，例如my.trip.pictures.jpg...
我建议使用正则表达式来确保捕获最后一个点和扩展名。

$("#fileInput").change(function() {

var ext = $(this).val().match(/(.+)(..+)/)[2];
$('#pdf').show().text('Your Extension is ' + ext);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf" style="display:none;"></span>

Answer 4

$("#fileInput").change(function() {
var qwe = $(this)[0].files;
console.log(qwe[0].name.split('.').pop())// another option to get extension name
$('#pdf').show().text('Your Extension is ' + qwe[0].name.slice(-3));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="pdffile" id="fileInput" class="form-control" placeholder="Browse" required>
<span id="pdf" style="display:none;"></span>

试试这种方式