Jquery 跨浏览器文件上传输入黑客

我正在使用一种黑客技术，使文件输入在所有浏览器中都保持一致。我正在使用。基本上，您可以将文件上载输入的不透明度设置为0，并将其绝对置于另一个已设置样式的输入之上（以实现跨浏览器一致性）。当用户点击“文件上传”区域时，他们实际上是在点击其下方的输入，但由于上传区域的不透明度为零，因此仍会触发上传对话框。这种方法非常有效（请阅读链接中的更多内容），但是，有一个主要问题：因为不透明度设置为0，所以您看不到文件路径，这是让用户知道“浏览”按钮起作用所必需的

我正在寻找一个jquery解决方案，它可以执行以下操作：当用户浏览一个文件时，jquery将文件名/路径存储在一个变量中，然后将该变量显示为另一个输入的（以前的输入）值。也就是说，当用户选择一个文件时，该文件名作为一个值显示在另一个输入中

这是我的HTML/CSS：

<div id="upload">
    <input type="text" id="fakeUpload" value="Choose File">
    <span class="file-upload">
        <input type="file" name="file-upload" class="wpcf7-file" size="1" value="1">
    </span>
</div>


#upload{position:relative; float:left; width:100%; cursor:pointer;}
#upload input#fakeUpload{position:absolute; top:0; left:0; display:block; font-size:15px; color:black; background:#f1f1f1; padding:7px 5%;  width:90%!important; cursor:pointer; z-index:1;}
#career input[type="file"] {opacity: 0; position:absolute; top:0; left:0; z-index:2; text-align: right;}

#上传{位置：相对；浮动：左；宽度：100%；光标：指针；}
#上传输入#fakeUpload{位置：绝对；顶部：0；左侧：0；显示：块；字体大小：15px；颜色：黑色；背景：#f1f1f1；填充：7px 5%；宽度：90%！重要信息；光标：指针；z索引：1；}
#职业输入[type=“file”]{不透明度：0；位置：绝对；顶部：0；左侧：0；z索引：2；文本对齐：右侧；}

添加：

---

演示没有你的风格，但你可以发挥你的想象力：

不要只依赖于点击的不透明度。如果用户使用的浏览器显示不一致（如移动浏览器），则文件输入可能不在“假”输入的正上方，因此他将无法单击该文件

下面是一个等效的解决方案，但它依赖于javascript来单击实际输入： html。请注意，“真实”输入没有隐藏，但您可以对其应用

显示：无
：

参见小提琴：

html:

基于此，创建一个脚本可以很容易地自动查找所有输入文件，并在页面加载时替换为假文件。
我认为这是不可能的。显示文件路径是一个安全问题，但您可以使用
$（'.wpcf7 file'）。on（'change'，function（）{this.value}）获取实际文件名
在我提供的链接上，他们使用plan javascriptyes完成。实际的文件名是finem，不需要是path@AdamMerrifield你能用一个问题来构造它吗？同时将值存储在一个变量中，这样我就可以测试并接受它了？这太棒了，谢谢！Chrome显示了完整的路径，它在firefox中不起作用，但我会调试它。它在FF12中对我来说运行良好。你当前的版本是什么。还有12…我的问题不是你的代码，而是我的原始代码。看起来，即使不可见输入的z索引为2，它也不可单击…它在输入的右侧工作，但在值所在的位置，它只单击值，而不是不可见输入
$('.wpcf7-file').on('change', function(){
    $('#fakeUpload').val(this.value);
});

normal file:<input type="file" name="myfile" id="myfile" />
<br /> <br /> 
Fake: <input type="text" id="choosebox" />
<a href="#" id="choose">Choose</a>

$("#choose").click(function(){
    $("#myfile").click();
    return false;
});

$("#myfile").change(function(){
    $("#choosebox").val($(this).val())
});