Как загрузить файл с помощью простого вызова jquery-ajax

Question

Я ищу простой клиентский скрипт для загрузки файла с использованием ajax.Поиски в Интернете этого скрипта привели к появлению множества плагинов с несколькими функциями.Мне не нужны multi-feautres - просто чтобы иметь возможность загружать их как можно проще, используя ajax

Можно ли написать что-то простое как:

$.get('server/upload.php?file = ' + $('#uploadInput').val(), function(data) {
   $('.result').html(data);    
 });

Если это возможно- как я должен написать это правильно ($('#uploadInput').val() не даст мне правильный путь к каталогу - так что мне нужно сделать, чтобы передать местоположение с помощью Ajax).

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

Answer 1

Вы не можете использовать AJAX для загрузки файлов (если браузеры клиентов не поддерживают элемент HTML 5, который разрешает доступ к объекту файла.).

Ваше решение - подделать его

создать элемент формы

<form id="myForm" action="upload.php" method="POST" target="results_frame">
  <input name="fileUpload" type="file" />
  <input type="submit" value="Submit" />
</form>

Мы устанавливаем цель фрейма для 'results_frame', мы определим его после формы в HTML как пустой iframe.

<iframe id="results_frame" name="results_frame" style="display:none;"></iframe>

Затем в бэкэнде вашего php-файла вы можете записать файл как -

$_FILE['file']['param']; //where param accepts multiple values
//such as name, type, size, error, and tmp_name

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

Answer 2

Этого можно достичь, используя некоторые функции HTML5, такие как Файловый API (см. Пример: загрузка выбранного пользователем раздела в этой статье).

Но если вы хотите кросс-браузерное решение, я бы порекомендовал вам использовать плагин для загрузки на стороне клиента.Например, плагин jQuery form довольно прост в настройке. Valums Ajax upload тоже очень приятно.Он предоставляет множество функциональных возможностей, таких как перетаскивание и загрузка, но если они вам не нужны, их можно легко отключить.

Answer 3

В современных браузерах вы можете использовать новый xhr2 (см. http://www.html5rocks.com/en/tutorials/file/xhr2/), чтобы выполнить аккуратную загрузку AJAX-файла ... включая индикатор выполнения. Я действительно не знаю, было ли это уже встроено в последнюю версию jQueryМожет быть, кто-то еще может пролить свет на это.

Answer 4

Если вы хотите создать загрузчик ajax, который работает во всех современных браузерах, вам следует проверить некоторые плагины jQuery. Проверьте эту статью, например: http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/.

То, что вы предложили в своем первом посте, не будет работать. Даже если вы извлекаете содержимое из формы, вы не можете поместить информацию в GET. Длина URL может быть не более 2000 (?) Символов, поэтому загрузка файла большего размера приведет к сбою загрузки. Вы должны отправить это, используя POST.

Кстати, у меня был хороший опыт работы с этим плагином: http://valums.com/ajax-upload/. Это довольно просто, так что вы можете настроить его так, как хотите (с некоторыми базовыми возможностями jQuery / js).

Надеюсь, это поможет.

Answer 5

Uploadify - еще одно отличное решение для загрузки ajax. Его

• чрезвычайно прост в настройке,
• очень стильно, а
• кроссовер .

См. демонстрации