Question

我们希望减少用户在我们网站上传文件所需的步骤数;所以我们使用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用户提供一个按钮？

Answer 1

出于安全考虑，您尝试做的事情是不可能的。似乎是IE9不允许你以这种方式提交表单，除非它是触发它的文件上传控件的实际鼠标点击。

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

此问题的解决方案似乎是：

以一种位于按钮后面的方式设置控件的样式。您在问题中提到了这一点，但Romas在In JavaScript can I make a "click" event fire programmatically for a file input element?提供的答案确实有效（我在IE9，Chrome v23和FF v15中试过）。
使用基于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 : simulating a click on a <input type="file" /> doesn't work in Firefox?

IE9 file input triggering using Javascript

getting access is denied error on IE8

Answer 2

嘿，这个解决方案有效。下载我们应该使用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();      
       }
   });
};

Answer 3

此解决方案看起来可能有效。您必须将它包装在<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; }

Answer 4

好吧，就像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多少？

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

从onchange触发.click（）时，IE9上的“SCRIPT5访问被拒绝”错误

4 个答案: