使用 Jquery 显示文件输入的值答案

【问题标题】：Displaying the value of File Input using Jquery使用 Jquery 显示文件输入的值
【发布时间】：2013-03-23 19:14:25
【问题描述】：

由于使用 css 对文件输入进行样式设置的限制，我正在尝试一种新方法来隐藏输入，然后使用 JQuery 和 .html 在单独的 div 中显示值。这是我到目前为止的代码：

//Photo
$('#photo').blur(function()
{
var photo=$(this).val();
if (photo.length > 1)
{
$('#photoText').html("Photo Added");
}
});

问题是在我选择文件后它没有显示 .html。有没有办法让它在选择后显示html文本？

【问题讨论】：

标签： jquery file input

【解决方案1】：

如果我理解您的建议，您正在为输入文件实现一个单独的文本框，并且您希望将输入文件路径设置为该文本框

代码如下：

 $("#fileUpld").live('change', function () {
            var path = this.value.replace(/^C:\\fakepath\\/i, ''); //for chrome browser 
            $("#inputTxt").val(path);

        });

【讨论】：

.live() 已弃用。使用.on()。
是的，你理解正确，但我无法在我的示例中使用它，即使使用 .on
首先确定是否触发了文件上传事件，通过调试代码可以知道，同时确保输入文件和输入文本使用正确的id跨度>

【解决方案2】：

如果我理解你的问题，这段代码应该可以工作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

  <script type="text/javascript">        
  /*<![CDATA[*/        
  $(document).ready(function(){
    $('#photo').change(function (){
      var photo=$(this).val();
      if (photo.length > 1){
        $('#photoText').html("Photo Added");
      }
    });
  });
  /*]]>*/
  </script>
</head>
<body>     
  <input type="file" id="photo" />
  <div id="photoText"></div>  
</body>
</html>

有jsfiddle example

【讨论】：

我可以看到这些应该如何工作，但它们不是 - 如果这是问题的一部分，我正在使用 jquery/1.4.2/jquery.min.js？
嗯，这也没有改变 - 可能必须使用不同的方法 - 是否有任何方法可以使用 CSS 成功编辑文件输入？
感谢 Luka 的努力，但它仍然无法正常工作，所以我将返回使用默认值 - 刚刚摆脱了内部斜角效果，我认为应该没问题在我的网站设计中
你看到 jsfiddle 的例子了吗？我问你是因为我可能不太了解你。如果此代码无法按您的预期工作，请说明需要什么结果。