Ошибка "SCRIPT5 Access denied" в IE9 при запуске .click() из onchange

Мы хотим уменьшить количество шагов, необходимых для загрузки пользователем файла на нашем веб-сайте; поэтому мы используем 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 после загрузки файла загрузился и пользователь выбрал файл; insteaed работы OnChange, я получаю сообщение об ошибке "SCRIPT5 Access denied". Я попытался установить произвольный тайм-аут, установив интервалы, чтобы проверить, предоставлен ли файл безрезультатно.

Есть ряд других вопросов, связанных с этим; однако ни один из них не имеет достойного ответа (один сказал, чтобы диалоговое окно файла было прозрачным и зависало за кнопкой!)

Кто-нибудь еще разрешил это? Или абсолютно необходимо, чтобы я предоставлял кнопку пользователям IE?

Ответ 1

Из соображений безопасности то, что вы пытаетесь сделать, невозможно. Кажется, что IE9 не позволит вам отправить форму таким образом, если это не был фактический щелчок мышью на элементе управления загрузкой файлов, который запускает его.

Для аргументов я смог использовать ваш код для отправки в обработчике change, но он работал только, когда я сам нажал кнопку Browse. Я даже настроил опрос в методе $(document).ready для переменной, заданной обработчиком change, который указывает, что представление должно быть вызвано - это тоже не сработало.

Решения этой проблемы выглядят следующим образом:

Стилирование элемента управления таким образом, чтобы он находился за кнопкой. Вы упомянули об этом в своем вопросе, но ответ, предоставленный Romas здесь В JavaScript я могу сделать "click" пожар событий программно для элемента ввода файлов? действительно работает (Я пробовал в 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: имитация щелчка на < input type = "file" / > не работает в Firefox?

Запуск ввода файла IE9 с использованием Javascript

получить доступ к ошибке в IE8

Ответ 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();      
       }
   });
};

Ответ 3

Это решение похоже, что оно может работать. Вам придется обернуть его в <form> и получить его для публикации в обработчике изменений jQuery и, вероятно, обработать его в form_load с помощью __eventtarget или iframe или что бы то ни было, что использует веб-формы, но он позволяет вам выбирать файл, и, отправив форму, она должна отправить ее. Однако я не могу его протестировать, так как у меня нет среды, настроенной дома.

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; }

Ответ 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 вы хотите манипулировать им?

Надеюсь, это поможет; извините, если я неправильно понял ваш вопрос.