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/

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

Answer 2

不要只依赖于点击的不透明度。如果用户使用的浏览器显示不一致（例如移动浏览器），则文件输入可能不会完全高于“假”输入，因此他无法单击它

这是一个等效的解决方案，但依赖于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())
});

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

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

2 个答案: