Chrome和Firefox文件上传浏览错误

Chrome and Firefox file upload browse bug

本文关键字：浏览 错误 文件 Firefox Chrome      更新时间：2023-09-26

为了在表单type="file"上传上有完整的UI样式，我有一个伪表单字段(#fileName)，浏览，上传按钮。我有一个隐藏的表单，下面有实际的表单字段(#fileAttach)，浏览和上传按钮。我试图触发它，当用户单击browse时，它触发实际的浏览按钮，然后获取实际输入字段的文件路径的值，并在伪输入字段上填充文件。

    browse = function () {
        $("#fileAttach").click();
        var file = $("#fileAttach").val();
        $("#fileName").val(file);
        }

适用于Safari和IE。然而，在Chrome和Firefox中，它似乎在用户选择文件后停止执行。文件名没有传递给伪表单字段。但是，如果我第二次触发browse()，它会立即将第一个文件路径填充到伪表单字段，然后生成一个新的文件浏览窗口。Chrome/FF似乎只执行函数的第一行并暂停。如果再次调用该函数，则执行第二行和第三行，等等。

这是怎么回事，我该怎么解决?

浏览器真的不喜欢你通过代码触发上传对话框，我发现。

我总是只显示我自己的浏览按钮，并绝对将input[type=file]与opacity: 0放置在顶部。

我是这样做的。也在处理一个上传问题，但是遇到问题导致Option Explicit语句

将记录添加到数据库并同时上传图像(第二次尝试使用不同的代码)

不确定这是不是你要找的。

.photodiv{
  padding:8px 16px;
  background:;
  border:0px;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
    
}
<button class="photodiv">Photo<input type="file" name="attach1" class="hide_file"></button>

相关文章：