Question

为了在表单类型=“文件”上传中拥有完整的UI样式，我有一个伪表单字段（#fileName），浏览，上传按钮。我在下面有一个隐藏的表单，其中包含实际的表单字段（#fileAttach），浏览和上传按钮。我试图触发它，以便当用户单击浏览时，它会触发实际的浏览按钮，然后获取实际输入字段的文件路径的值，并在伪输入字段上填充文件。

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

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

这里发生了什么，我该如何解决？提前谢谢。

Answer 1

浏览器不太喜欢你通过代码触发上传对话框，我找到了。

我一直只是显示自己的浏览按钮，并input[type=file]绝对定位在opacity: 0的顶部。适用于所有浏览器。

Answer 2

这就是我的做法。也可以解决上传问题，但是遇到麻烦会导致Option Explicit语句

Add Record to Database and Upload an Image at the same time (2nd Attempt with different code)

不确定这是否是您想要的。

.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>

Chrome和Firefox文件上传浏览错误

2 个答案: