Остановите пользователей IE, вводящих данные для загрузки файла - PullRequest
3 голосов
/ 17 марта 2010

Мои тестировщики обнаружили, что если вы вводите свободный текст в поле загрузки файла, то ни одна из кнопок на странице не будет работать, пока этот текст не будет удален (поэтому страница не может быть отправлена).

Я могу скопировать это с помощью следующего кода ASPX (без кода):

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <form id="form1" runat="server">
      <div>
        <asp:FileUpload ID="fuTest" runat="server" />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
      </div>
    </form>
  </body>
</html>

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

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

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

Есть мысли?

Ответы [ 3 ]

5 голосов
/ 30 марта 2010

Согласно предложению @ Jer, я смог предотвратить ввод в загрузку файла, не нарушая других функций, обработав keypress события при загрузке. Использование jQuery:

$(document).ready() {
    $('input:file').keypress(function() {
      return false;
    });
}
2 голосов
/ 17 марта 2010

Я не уверен, что это будет работать, как ожидалось, но вы пробовали: <input readonly="readonly">

1 голос
/ 02 августа 2011

Принятый ответ отлично подходит для всех существующих файловых элементов управления.

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

Ключом для решения в этом случае была функция .live .

Решение будет следующим:

$('input:file').live('keypress', function() { return false; });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...