Подтвердить что ты не робот

Т.е. отправить форму javascript с вводом файла

У меня есть html-форма с пользовательским полем загрузки файлов. И я имею в виду, что я переместил фактическое поле файла за пределы страницы с помощью css, что у меня есть собственное поле ввода и кнопка на месте, и что у меня есть событие jquery click, прикрепленное к этой настраиваемой кнопке, чтобы вызвать диалог ввода файлов. Все работает отлично, в каждом браузере.

Но мне нужно отправить форму через javascript. И я получил где-то, что IE запоминает мои действия с javascript как вредоносную манипуляцию с полем ввода файла и блокирует мой доступ с ошибкой "access denied" при вызове document.formName.submit().

Есть ли способ обойти это, потому что я совершенно с ума сошел, пытаясь найти решение. Я серьезно не хочу использовать поле ввода файлов по умолчанию, так как каждый браузер делает это по-другому и испортил мой дизайн.

код:

<form name="thisForm" onsubmit="return false;" enctype="multipart/form-data" method="post" action="index.cfm/somepage">
    <input type="file" class="hidden" name="hidden" id="hidden" />
    <input type="text" name="shown" id="shown" />
    <button id="button">browse..</button>
    <input type="submit" id="submitForm" />
</form>

<script>
    $('button').click(function(){
        $('#shown').val($('#hidden').val());
    });

     $('submitForm').click(function(){
        validateForm();
    });

    function validateForm()
    {
        //regular expression validation against all other input fields in the form
        //not the file input field

        validateVAT();
    }

    function validateVAT()
    {
        //connect to external service to check VAT

        submitForm();
    }

    function submitForm()
    {
        document.thisForm.submit();
    }
</script>

UPDATE: Я просто попытался сначала загрузить файл, прежде чем отправить форму, через ajax, но это также дало мне отказ от отказа в доступе.. > _ >

4b9b3361

Ответ 1

Я нашел ответ сам, после 2 дней сумасшедшего испытания и ошибки. Надеюсь, я смогу помочь кому-то с этим.

Я удалил поле ввода скрытого файла с моей страницы coldfusion и заменил его тегом iframe. Этот тег iframe связан с другой страницей coldfusion, содержащий другую форму с полем удаления удаленного файла. Теперь, когда я использую javascript, чтобы щелкнуть поле ввода файла, которое все еще скрыто от вида, оно по-прежнему дает диалоговое окно просмотра без заминки. Но когда я использую javascript для отправки формы, через iframe, чудесным образом, она отправляет форму в iframe, позволяя загружать файл на некоторые серверные скрипты из ваших предпочтений.

код iframe:

<form id="formFileUpload" class="formFileUpload" name="formFileUpload" method="post" action="../actions/act_upload_file.cfm" autocomplete="off" enctype="multipart/form-data">
    <input type="file" class="buttonFileHidden" id="inputFile" name="partnersLogo" />
</form>

iframe:

<iframe src="admin/dsp_file_upload.cfm" id="ifu" name="ifu" class="buttonFileHidden">
</iframe>

javascript нажмите и отправьте:

ifu.document.formFileUpload.partnersLogo.click();
ifu.document.formFileUpload.submit();

Ответ 2

У меня была такая же проблема, и я решил ее с помощью стилизованного тега <label> с небольшим обходным решением в Firefox.

http://jsfiddle.net/djibouti33/uP7A9/

Цели:

  • позволяет пользователю загружать файл с помощью стандартного управления вводом содержимого html
  • скрыть стандартный контроль ввода файлов HTML и применить собственный стиль
  • после того, как пользователь выберет файл для загрузки, автоматически отправьте форму

Браузеры:

  • Firefox, Chrome, IE8/9, Safari
  • IE7 не работает, но может быть, если вы добавите его к обходному пути, описанному ниже.

Исходное решение:

  • Скрыть ввод файла, расположив его вне экрана. Важно не отображать: нет, так как некоторым браузерам это не понравится.
  • Добавьте еще один стилизованный элемент на страницу (ссылка, кнопка).
  • Слушайте щелчок по этому элементу, затем программно отправляйте клик на вход файла, чтобы запустить собственный "проводник файлов"
  • Прослушивание события ввода файла (происходит после выбора пользователем файла)
  • Отправить форму

Проблема:

  • IE: если вы программно отправляете клик на вход файла для его активации (2), программная отправка формы (5) приведет к ошибке безопасности

Обходное решение:

  • То же, что и выше
  • Воспользуйтесь функциями доступности, встроенными в тег метки (щелчок на ярлыке активирует связанный с ним элемент управления) путем стилизации тег метки вместо ссылки/кнопки
  • Слушайте ввод файла в событие обмена
  • Отправить форму
  • По какой-то причине браузер Mozilla не будет активировать ввод файла, щелкнув по нему.
  • Для Mozilla, прослушайте щелчок на ярлыке и отправьте событие щелчка на вход файла, чтобы активировать его.

Надеюсь, это поможет! Ознакомьтесь с jsfiddle для получения подробных сведений о html/js/css, чтобы все это работало.

Ответ 3

Если вы похожи на меня, и вы не хотите использовать iframe, и вы не слишком увлекались упомянутым выше решением метки, вы можете просто поместить оригинальную кнопку над стилизованной кнопкой с непрозрачностью 0.

Используя приведенный выше пример, вы все равно должны:

<input type="file" class="hidden" name="hidden" id="hidden" />
<input type="button" name="shown" id="shown" value="Add File" />

Но .hidden будет определяться так:

.hidden {
  position: absolute;
  left: -150px;
  opacity: 0;
  filter: alpha(opacity=0);
}

Config: установите непрозрачность на 0,5 (или = 50), чтобы увидеть прозрачный элемент и настроить левое положение.

Возможно, так же хакки, как и ответы выше, но решение, удобное для начальной загрузки, и в моем случае единственное, что сработало.

Ответ 4

Я нашел странное решение для решения этой проблемы.

Он думал о js click thread. Если он выходит из этой темы, проблем с безопасностью больше нет.

Я решил использовать window.setTimeout. см. пример ниже:

<script type="text/javascript">

    $(function () {
        $("#<%= this.fuDoc.ClientID %>").bind('change', uploadFile);
        $("#<%= this.btnUpload.ClientID %>").click(chooseFile);
    });

    function chooseFile() {
        $("#<%= this.fuDoc.ClientID %>").click();
    }

    function uploadFile() {
        var fu = $("#<%= this.fuDoc.ClientID %>");
        if (fu.val() != "") {
            window.setTimeout(function () { 
                <%= this.ClientScript.GetPostBackEventReference(this.btnUpload, "") %>; 
            }, 100);
        }
    }

</script>
<asp:FileUpload ID="fuDoc" runat="server" style="display: none;" />

<asp:Button runat="server" ID="btnUpload" Text="upload" OnClick="btnUpload_Click" />

<asp:Label ID="lbltext" Text="" runat="server" />`

то больше не будет отказано!

Ответ 5

Это старый пост, но проблема все еще возникает. Возможно, это не работает, потому что jQuery любезно терпит неудачу. У меня возникла эта проблема и я задавался вопросом, почему моя скрытая форма не будет отправлена ​​и файл будет загружен. Я начал с использования jQuery, но потом я пошел ваниль. Он по-прежнему не работал, но выглядел так, как будто в моей функции .click() было выбрано исключение.

Запуск

try {
    document.getElementById('formid').submit();
} catch (e) {
    alert(e);
}

показал, что мы действительно ошибались, и быстрые исследования показали, что это произошло потому, что IE НЕ ПОДДЕРЖИВАЕТ МОДЕЛИРОВАННЫЕ КЛИКИ НА ВХОДЕ ФАЙЛА. Это означает, что, когда форма отправляется на публикацию, IE отказывается публиковать форму

Извините смелые шапки, но я знаю, что многие люди будут видеть текст и не читать его

Ответ 6

Вы пробовали

  $('button').click(function(){
        $('form[name=thisForm]').submit()
    });

Ответ 7

Вам нужно изменить onsumbit='return false;' на onsubmit='return validateForm()'.

Затем имеем validateForm() return true, если форма передает ваши проверки проверки, или false, если это не так.

onsubmit='return false' препятствует отправке формы через document.thisForm.submit();, а также когда пользователь нажимает кнопку отправки.

Ответ 8

Я прокомментировал эти строки в j query.form.js, тогда все отлично работает для меня. Не спрашивайте меня, потому что даже у меня нет решения для этого, но он работает наверняка.

        if (io.contentWindow.document.execCommand) {
          try { // #214
               io.contentWindow.document.execCommand('Stop');
         } catch(ignore) {}
      }