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

Question

我正在使用 hack 使文件输入在所有浏览器中看起来一致。我正在使用 this technique .基本上，您将文件上传输入的不透明度设置为 0，并将其绝对定位在另一个样式化的输入之上(为了跨浏览器的一致性)。当用户点击“文件上传”区域时，他们实际上是在点击它下面的输入，但由于上传区域的不透明度为零，它仍然会触发上传对话框。这个 hack 非常有效(在链接中阅读更多内容)，但是，有一个主要问题:因为不透明度设置为 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;}

Answer 1

添加:

$('.wpcf7-file').on('change', function(){
    $('#fakeUpload').val(this.value);
});

http://jsfiddle.net/fEp68/

demo没有你的样式，但是你可以发挥你的想象力:]