10

我们希望减少用户在我们的网站上上传文件所需的步骤；所以我们使用 jQuery 使用以下标记（简化）打开和回发文件：

<a onclick="$('#uplRegistrationImage').click();">
    Change profile picture
</a>

<!-- Hidden to keep the UI clean -->
<asp:FileUpload ID="uplRegistrationImage" 
                runat="server" 
                ClientIDMode="static"
                Style="display:none"
                onchange="$('#btnSubmitImage').click();"    />

<asp:Button runat="server" 
            ID="btnSubmitImage" 
            ClientIDMode="static" 
            Style="display:none" 
            OnClick="btnSubmitImage_OnClick" 
            UseSubmitBehavior="False" />

这在 Firefox 和 Chrome 中运行良好；单击链接时打开文件对话框，并在选择文件时触发回发。

但是在 IE9 中，文件上传已加载且用户选择了文件后；代替 OnChange 工作，我收到“SCRIPT5 访问被拒绝”错误。我尝试设置任意超时，设置间隔以检查文件是否无济于事。

还有许多与此相关的其他问题；但是似乎没有一个像样的答案（有人说将文件对话框设置为透明并悬停在按钮后面！）

有没有其他人解决了这个问题？还是绝对有必要为 IE 用户提供一个按钮？

4

4 回答 4

13

出于安全原因，您尝试执行的操作是不可能的。似乎 IE9 不允许您以这种方式提交表单，除非它是在触发它的 File Upload 控件上的实际鼠标单击。

为了争论，我能够使用您的代码在change处理程序中进行提交，但它仅在我自己单击Browse按钮时才起作用。我什至在$(document).ready方法中为change处理程序设置的变量设置了轮询，指示应该触发提交 - 这也不起作用。

这个问题的解决方案似乎是：

  1. 设置控件样式，使其位于按钮后面。您在问题中提到了这一点，但是 Romas 在此处提供的答案在 JavaScript 中，我可以以编程方式为文件输入元素触发“点击”事件吗？确实有效（我在 IE9、Chrome v23 和 FF v15 中尝试过）。
  2. 使用基于 Flash 的方法（GMail 就是这样做的）。我试用了Uploadify演示，它似乎工作得很好。

样式化文件上传：

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

参考：

jQuery：模拟点击 <input type="file" /> 在 Firefox 中不起作用？

使用 Javascript 触发 IE9 文件输入

在 IE8 上获取访问被拒绝错误

于 2012-11-15T05:47:51.360 回答
3

嘿，这个解决方案有效。下载我们应该使用 MSBLOB

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};
于 2016-07-01T07:04:53.323 回答
2

这个解决方案看起来可能会奏效。您必须将其包装在 a 中<form>并将其发布到 jquery 更改处理程序中，并可能使用 __eventtarget 或 iframe 或 Web 表单使用的任何内容在 form_load 中处理它，但它允许您选择一个文件，并通过提交表单，它应该发送它。但是，我无法对其进行测试，因为我在家中没有设置环境。

http://jsfiddle.net/axpLc/1/

<a onclick="$('#inputFile').click();">
    Change profile picture
</a>
<div id='divHide'>

    <input id='inputFile' type='file' />

</div>


$('#inputFile').change(function() { alert('ran'); });

#divHide { display:none; }
于 2012-11-08T17:48:35.847 回答
0

好吧，就像 SLC 所说的那样，您应该使用该<Form>标签。

首先你应该指出文件的数量；这应该由您的输入字段确定。第二步是将它们堆叠成一个数组。

<input type="file" class="upload" name="fileX[]"/>

然后创建一个循环；通过循环，它将根据当前所在的输入字段自动确定。

 $("input[@type=file]:nth(" + n +")")

然后你会注意到选择的每个文件；将输入名称替换为文件名。这应该是通过 jQuery 提交多个文件的非常非常基本的方式。

如果您想要一个项目：

$("input[@type=file]").change(function(){
   doIt(this, fileMax);
 });

那应该在找到最大文件的地方创建一个 Div；并附加到onEvent. 上面的相关代码也需要这些：

 var fileMax = 3;
 <input type="file" class="upload" name="fileX[]" />

这应该导航 DOM 父树；然后分别创建字段。这是一种方式；另一种方式是您在上面看到的 SLC 方式。有很多方法可以做到这一点；这只是你想要操纵它多少 jQuery？

希望这会有所帮助；对不起，如果我误解了你的问题。

于 2012-11-12T21:31:12.650 回答