начать загрузку файла при выборе - PullRequest
6 голосов
/ 20 августа 2011

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

Ответы [ 3 ]

6 голосов
/ 20 августа 2011

Событие change наступит, когда файл будет выбран из поля загрузки файла. Значение поля будет '', если файл не выбран (поле очищено).

<form method="post" action="upload.script">
    <input type="file" id="formfile"/>
    <input type="submit" id="formsubmit"/>
</form>

<script type="text/javascript">
    var file= document.getElementById('formfile');
    var submit= document.getElementById('formsubmit');

    // If scripting is available, can auto-submit the form, so no submit
    // button needed.
    //
    submit.parentNode.removeChild(submit);

    // When field is filled in with a filename, submit form
    //
    file.onchange= function() {
        if (this.value!=='')
            this.form.submit();
    };
</script>

Это хорошая идея? Сомнительный. Автоматическая отправка формы, если пользователь не ожидает, что она может оказать негативное влияние.

2 голосов
/ 20 августа 2011

Вы можете использовать JQuery для автоматической отправки файла на сервер после выбора ...

Проблемы:

Что делать, если пользователь не хочет выбирать этот файл, но файл ужевыгружен на сервер?

Что если предыдущий произойдет до окончания загрузки файла?

Как насчет того, когда пользователь ничего не делает и закрывает страницу?Как долго вы будете хранить файл

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

Если вы используете GMail, вы заметите, что у них есть решение для перетаскивания файлов для прикрепления файлов к электронной почте.Перетащите со своего рабочего стола на заранее заданный регион и в Wallah.

Если у вас есть поддержка HTML5 для людей, использующих это (большинство следует, если они идут в ногу со временем), тогда вы можете использовать перетаскивание, встроенное в HTML5.

Попробуйте посмотреть наthis: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

Вы также можете попробовать что-то вроде Plupload (http://www.plupload.com/), но это может быть излишним для этого. Plupload больше подойдет для больших файлов, которые нуждаются в анимации прогресса и фрагментации. Однако язнаю, что вы сможете написать его так, чтобы загрузка началась немедленно, а вы перенаправили сразу после ее завершения. Также может потребоваться работа на стороне сервера, для которой вы не настроены.

...