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

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

不要只依赖于点击的不透明度。如果用户使用的是显示不一致的浏览器（比如手机浏览器），文件输入可能不在“假”输入的正上方，所以他将无法点击

这是一个等效的解决方案，但依赖于 javascript 点击真正的输入： html。请注意，“真实”输入并未隐藏，但您可以对其应用 display:none：

见小提琴：http://jsfiddle.net/QPUJa/

html:

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

js:

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

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

基于此，创建一个脚本来自动查找所有输入文件并在页面加载时替换为假文件是很容易的。

Answer 2

添加：

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

http://jsfiddle.net/fEp68/

演示没有你的造型，但你可以发挥你的想象力：]