Дополнительно
Загрузка файлов с помощью AngularJS
Вот моя HTML-форма:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Я хочу загрузить изображение с локальной машины и прочитать содержимое загруженного файла. Все это я хочу сделать с помощью AngularJS.
Когда я пытаюсь вывести значение $scope.file
, оно выдается как undefined.
291
20
В некоторых ответах здесь предлагается использовать
FormData()
, но, к сожалению, это объект браузера, недоступный в Internet Explorer 9 и ниже. Если вам нужно поддерживать эти старые браузеры, вам понадобится запасная стратегия, например, использование<iframe>
или Flash.Уже существует множество модулей Angular.js для выполнения загрузки файлов. Эти два имеют явную поддержку старых браузеров:
И некоторые другие варианты:
Один из них должен подойти для вашего проекта или может дать вам некоторое представление о том, как написать код самостоятельно.
Самое простое-это использовать HTML5 API, а именно [
FileReader
][1]HTML-код очень простой:
В вашем контроллере определить 'добавить' метод:
Совместимости
Настольных Браузеров
Мобильные Браузеры
Примечание : readAsBinaryString() метод является устаревшим и readAsArrayBuffer() должен использоваться вместо этого.
Это современный способ браузера, без 3-й партии библиотек. Работает на всех последних браузерах.
HTML-код:
РНР:
<?в PHP
в JS скрипку (только фронтальный) https://jsfiddle.net/vince123/8d18tsey/31/
Ниже приведен рабочий пример загрузки файла:
http://jsfiddle.net/vishalvasani/4hqVu/
В этом примере одна функция называется
From View, которая будет обновлять массив файлов в контроллере
или
Вы можете проверить jQuery File Upload с помощью AngularJS
http://blueimp.github.io/jQuery-File-Upload/angularjs.html
Вы можете достичь хороший файл и загрузить папку через flow.js.
https://github.com/flowjs/ng-flow
Проверьте здесь демо
http://flowjs.github.io/ng-flow/
Это не'т поддерживать ИЕ7, ИЕ8, ИЕ9, так что вы'll в конечном итоге придется использовать слой совместимости
https://github.com/flowjs/fusty-flow.js
Используйте
onChange, после
событие, чтобы передать входного файла элемент вашей функции.в
<тип входного=то"файл" onChange, после="и угловые.элемент(это).области().fileSelected(это) и" />
Поэтому, когда пользователь выбирает файл, у вас есть ссылка на это, не требуя от пользователя нажмите и"Добавить" или "кнопку Загрузить и".
Я попробовал все варианты, что @Anoyz (правильный ответ) дает... и самое лучшее разрешение https://github.com/danialfarid/angular-file-upload
Некоторые Особенности:
Это'ы работают отлично для меня. Вы просто должны обратить внимание на инструкции.
На стороне сервера я использую NodeJs, Express 4 и Мултэр промежуточного управлять сложного запроса.
На в
<тип входного=Файл>
элемент не работает по умолчанию с НГ-модель директивы. Она нужна директивы:Рабочая демо-возвращение-файлов директивой
, которая работает с НГ-модель в
<SUP-серфинг>1</суп>в
в
`$протоколу HTTP.сообщение от список файлов
При отправке поста с [объектом] файлФайл важно комплект
'контент-тип': не определено
. В XHR и отправка метод тогда будет обнаруживать [объект] файлФайл и автоматически установить тип содержимого.HTML-код
Скрипты
</тело> </HTML и ГТ;
Легко с помощью директивы
HTML-код:
ДШ:
я думаю, что это угловой загрузить файл:
НГ-файл-загрузить
Директива облегченный угловой JS для загрузки файлов.
Вот демо страницы.Особенности
https://github.com/danialfarid/ng-file-upload
Ваш файл и загрузки данных JSON в то же время .
в
в
Вы можете использовать
виде FormData
объект, который является безопасным и быстрым:[http://jsfiddle.net/vishalvasani/4hqVu/](http://jsfiddle.net/vishalvasani/4hqVu/) отлично работает в chrome и IE (если немного обновить CSS в background-image). Это используется для обновления прогресс-бара:
но в FireFox angular's [percent] данные не обновляются в DOM успешно, хотя файлы загружаются успешно.
Я знаю, что это поздно, но я создал простую директиву загрузки. Что вы можете получить работу в кратчайшие сроки!
НГ-просто-загрузки больше на GitHub с примером с помощью веб-API.
Вы можете рассмотреть IaaS для загрузки файла, такие как Uploadcare. Есть угловой пакет для него: https://github.com/uploadcare/angular-uploadcare
Технически это'ы реализованы в качестве директивы, предоставляя различные варианты загрузки и манипуляций для загруженных изображений в виджете:
Другие варианты конфигурации, чтобы играть с: https://uploadcare.com/widget/configure/
HTML-код
добавить 'profileimage()' метод в контроллер
Это должно быть обновление/комментарий к @на jQuery-гуру'ы ответ, но как я Дон'т иметь достаточно рэп она будет идти здесь. Он исправляет ошибки, которые теперь сгенерированный код.
https://jsfiddle.net/vzhrqotw/
Изменения в основном:
К:
Не стесняйтесь, чтобы переместить в более подходящее место, если это необходимо.
Я'вэ читать все нити и решения API в HTML5 посмотрел лучше. Но что это меняет в моей двоичные файлы, развращая их таким образом, Я'вэ не исследованы. Решение, которое прекрасно работал для меня :
HTML-код :
ДШ:
На стороне сервера (на PHP):
Я в состоянии загрузить файлы с помощью AngularJS с помощью ниже код:
"Файл" в качестве аргумента, который должен быть передан для ngUploadFileUpload функции
это
$охвата.файл на ваш вопрос.Ключевым моментом здесь является использование
transformRequest: []
. Это позволит предотвратить $HTTP с баловаться с содержимым файла.