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

Question

У меня есть 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, но это также дало мне ошибку «Отказано в доступе» ..> _>

Answer 1

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

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

Цели:

1. позволяет пользователю загружать файл с помощью стандартного элемента управления вводом html-файла
2. скрывать стандартный элемент управления вводом html-файла и применять собственный стиль
3. после выбора пользователемдля загрузки файла, автоматически отправьте форму

Браузеры:

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

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

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

Проблема:

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

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

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

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

Answer 2

Я нашел ответ сам, после 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 click & submit:

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

Answer 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), чтобы увидеть прозрачный элемент, и настройте левое позиционирование.

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

Answer 4

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

Запуск

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

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

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

Answer 5

Я нашел странное решение, чтобы решить эту проблему.

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

Я решил использовать 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" />`

тогда больше нет доступа!

Answer 6

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

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

Answer 7

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

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

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

Answer 8

Вы пробовали

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