POST сразу после выбора файла

У меня есть следующий код HTML

<form action="/script/upload_key.py" method="POST" enctype="multipart/form-data"> 
    Key filename: <input name="file_1" type="file"> 
    <input name="submit" type="submit"> 
</form>

который дает мне следующий материал.

Мне было интересно

Как я могу использовать JavaScript, чтобы исключить необходимость кнопки Submit. Это означает, что после я Choose File выбранный файл будет загружен немедленно?
Как я могу убедиться, что поле для отображения выбранного имени файла достаточно длинное, чтобы... не отображалось?

Ответ 1

Чтобы отправить его немедленно, просто выполните следующее:

<input name="file_1" type="file" onchange="this.form.submit();">

Если вы используете JQuery:

$("input[name='file_1']").change(function() { this.form.submit(); });

О других вопросах:

1) Существует много методов... например:

http://valums.com/ajax-upload/

http://www.webtoolkit.info/ajax-file-upload.html

(и многое другое) Просто google для: "Загрузка файла Ajax" или "Загрузка файла iframe" )

2) Не беспокойтесь о ширине поля. Поскольку вы не знаете, как долго это может быть путь, он никогда не будет достаточно длинным (я думаю). Также браузеры могут отображать его совсем по-другому. Например, Safari или Chrome показывают, что это сильно отличается от Firefox или IE. Просто используйте длину по умолчанию или ту, которая выглядит лучше с вашим дизайном.

Ответ 2

Для первого:

<input name="file_1" type="file" onchange="this.form.submit()">

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

Ответ 3

Грубая догадка о том, что вы хотите - при изменении текстового поля он инициирует отправку формы

$('.target').change(function() {
  document.forms["myform"].submit();
});

Изменить: Извините, я использовал jQuery...

Если вы отправите форму onchange, вы не заметите, что поле заполняется и, следовательно, не нужно менять длину текста. Если вы хотите, я бы получил количество символов в строке в поле, а затем применил атрибут размера к входу

mylength = document.getElementById('myfield').value
document.getElementById('myfield').size = mylength;