运行 jquery 函数是否上传文件

Question

我正在尝试更改 div 的高度，具体取决于输入中当前是否提交了文件。

我的输入有一个 id="upload"

截至目前，我运行这个函数使用 .change:

$('#upload').change(function(){
   $('div').css("height", "1000px");
});

这在我上传文件时完美无缺，但是当我删除文件时，输入再次发生变化，因此 div 的高度保持不变。因此，我需要一种可逆且双向工作的解决方案。我已经尝试了其他几个函数来检查值以及输入的长度，但我似乎无法得到任何有效的方法。

Answer 1

根据你所说的，我认为这应该适合你。它检查更改后#upload 元素的值的长度，如果它不大于 0（因此为空），它将 div 元素缩放回 50 px（大胆假设这是它的原始大小).

$('#upload').change(function() {
  if (jQuery(this).val().length > 0) {
    $('div').css("height", "1000px");
  } else {
    $('div').css("height", "50px");
  }
});

我把它放在 fiddle 这里：https://jsfiddle.net/7b0hvo3u/

也可以先检索 div 元素的原始高度，将其存储在某处，然后使用它代替 hard-coded“50px”。这将使它看起来像这样：

var originalHeight;
$('document').ready(function() {
  originalHeight = $('div').height();
});
$('#upload').change(function() {
  if (jQuery(this).val().length > 0) {
    $('div').css("height", "1000px");
  } else {
    $('div').css("height", originalHeight);
  }
});

此变体的 fiddle 在这里：https://jsfiddle.net/ywsthj2p/1/

希望这能有所帮助，如果没有：请详细说明:)

运行 jquery 函数是否上传文件

Run jquery functions if file is uploaded or not

jquery

height

field

file

input