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

【问题标题】：jQuery File Upload Doesn't work on SafarijQuery 文件上传在 Safari 上不起作用
【发布时间】：2017-09-06 18:41:38
【问题描述】：

我有一个按钮，当在 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 中单击“上传文件”按钮时显示文件浏览器窗口的任何想法？

【问题讨论】：

是的，只要使用一个 jquery 插件，你会省很多事
这不会在任何浏览器中打开“文件窗口”吗？没有代码可以做到这一点，并且锚被“作废”？
我可能记错了，但看起来您正在以编程方式尝试通过人工click 调用来激活文件上传，我认为某些浏览器将其禁用为安全措施并需要直接用户点击。这就是为什么很多人会使用带有for 属性的标签字段作为点击触发文件上传对话框的元素。

标签： javascript jquery safari

【解决方案1】：

我相信，出于安全原因，某些浏览器会拒绝以编程方式激活文件上传对话框。

尝试使用label 标记而不是a 标记，其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">

【讨论】：

谢谢！我会试一试，让你知道进展如何。
不幸的是，这并没有成功。这就是我尝试的： Upload File 并删除了该行： $("#uploadFileHandle").click();来自 jQuery。它在 Chrome 等中再次正常工作，但在 Safari 中仍然没有。您还有其他建议吗？
我在我的答案中添加了一个 sn-p，显示了您将如何设置它，因此标签本质上是一个触发文件上传的按钮，不需要 javascript。它对我有用，但不确定他们的嵌入式代码 sn-ps 能走多远。此示例在您的 Safari 版本中是否适合您？
抱歉，我在原始问题中遗漏了标记 - 我有 class="displayNone" 而 Safari 不喜欢这样。删除它并像你一样设置它的样式。我真的很感谢你的回答！没有你，我无法弄清楚。

【解决方案2】：

感谢对这篇文章的评论： How to open a file / browse dialog using javascript?

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

<input type="file" class="displayNone" id="uploadFileHandle">

显然，Safari 不喜欢输入元素上的 class="displayNone"。我通过删除 displayNone 类然后用不同的样式来隐藏元素来让它工作。谢谢大家的回复！

【讨论】：

哦，是的，这是一个重要的细节 - 我很高兴你把它整理好了 :)