0

我正在使用 hack 使文件输入在所有浏览器中显示一致。我正在使用这种技术。基本上，您将文件上传输入的不透明度设置为 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;}
4

2 回答 2

1

添加：

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

http://jsfiddle.net/fEp68/

该演示没有您的样式，但您可以发挥您的想象力：]

于 2012-05-31T18:40:14.897 回答
1

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

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

见小提琴：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())
});

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

于 2012-05-31T18:51:05.317 回答