Question

我有一个按钮，当在Chrome或Firefox或Edge中点击时，会显示文件浏览器窗口，然后我可以在其中选择文件并完成文件上传。但是，当我单击Safari中的按钮时，没有任何反应 - 文件浏览器窗口不会出现。我在Windows 10上运行并安装了Windows版本的Safari。

按钮：

<a href="javascript:void(0)" id="uploadFile">Upload File</a>

处理程序：

        $(document).ready(function() {
            $("#uploadFile").click(function() {
                $("#uploadFileHandle").click();
                $('html,body').css('cursor','progress');
                var formdata = false;
                if (window.FormData) {
                  formdata = new FormData();
                }
                $("#uploadFileHandle").on("change", function() {
                    $('html,body').css('cursor','progress');
                    var i = 0, len = this.files.length, file;
                    file = this.files[0];
                    formdata.append("fileUpload", file)
                    if (formdata) {
                        csrftoken();
                        $.ajax({
                            url: "/profile/uploadFile",
                            type: "POST",
                            data: formdata,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if (response.success) {
                                    var res = response.file;
                                    $('html,body').css('cursor','default');
                                }
                            }
                        })
                    }   
                });
            });
        });

有关如何在Safari中点击上传文件按钮时显示文件浏览器窗口的任何想法？

Answer 1

我认为，出于安全原因，某些浏览器会对程序化激活文件上传对话框感到不满。

请尝试使用a标记，而不是label标记，而for标记的属性等于文件上传输入的ID，如下所示：

<label for="uploadFileHandle">Upload File</label>

当label具有for属性时，单击该属性也会自动单击具有匹配ID的元素。我所知道的任何浏览器都不会阻止此行为，也会减轻您的javascript。

body {
  padding: 25px;
}

#uploadFile {
  transition: all .2s ease-in-out;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
  background-color: #2ecc71;
  border: 2px solid #2ecc71;
  color: #ffffff;
  font-family: sans-serif;
  cursor: pointer;
}

#uploadFile:hover {
  background-color: #ffffff;
  color: #2ecc71;
}

#uploadFileHandle {
  visibility: hidden;
}

<label for="uploadFileHandle" id="uploadFile">Upload File</label>
<input type="file" id="uploadFileHandle">

Answer 2

感谢对此帖的评论： How to open a file / browse dialog using javascript?

我很抱歉在原来的问题中遗漏了一条重要的一句话：

String[] strSeq = [for (i in 0..10) "hello"];

显然，Safari不喜欢输入元素上的class =“displayNone”。我通过删除displayNone类然后以不同方式设置它以隐藏元素来实现它。感谢大家的回复！

jQuery文件上传在Safari上不起作用

2 个答案: