Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Получение value input type="file" multiple (https://javascript.ru/forum/misc/32936-poluchenie-value-input-type%3D-file-multiple.html)

StanislavZ 04.11.2012 23:32

Получение value input type="file" multiple
 
Здравствуйте друзья. Первый раз создаю тему с просьбой о помощи, обычно долго гуглю и нахожу решение проблемы.
Пишу ajax загрузчик файлов для своего проекта, с использованием возможности множественного выбора файлов. После выбора нескольких файлов создается их список чтоб можно было его отредактировать. Но ума не приложу как редактировать value input с атрибутом multiple.
alert($('[type = file]').prop('value'));

- Показывает имя только первого файла.
Попытка удалить файл из списка таким вот способом
document.getElementById('input').files[0]="";
Тоже не работает. Инфы в инете ноль

nerv_ 04.11.2012 23:47

Цитата:

Сообщение от StanislavZ
Инфы в инете ноль

прям не верится. Что конкретно вы хотите?

vadim5june 04.11.2012 23:53

<input type="file" id="myfile" multiple />
<script>
document.querySelector('#myfile').onchange = function(e) {
   files = this.files;
for(var a=0;a<files.length;a++)
alert(files[a].name);}
</script>

nerv_ 05.11.2012 00:03

vadim5june, http://learn.javascript.ru/array-iteration

vadim5june 05.11.2012 00:06

Цитата:

Сообщение от nerv_ (Сообщение 214162)

forEach и прочие не работают во всех браузерах=я пока не использую

StanislavZ 05.11.2012 00:10

Про массив files я знаю, и построение списка уже сделал. Вы немного не поняли вопроса.
Допустим пользователь выбрал несколько файлов. И перед отправкой передумал скажем отправлять одну картинку из списка. Нужно чтоб при нажатии на кнопку удаления файла в списке, он удалился из выбранных и их стало к примеру 7 а не 8.
Влиять на список, в отличии от получения информации через files не получается

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

nerv_ 05.11.2012 00:10

vadim5june,
Цитата:

Для их поддержки в IE<9 подключите библиотеку ES5-shim.
и нет проблем :)

nerv_ 05.11.2012 00:13

StanislavZ,
1. как Вы отправляете файлы на сервер?
2. как делаете превьюшки?

vadim5june 05.11.2012 00:15

Цитата:

Сообщение от nerv_ (Сообщение 214167)
и нет проблем :)

Спасибо! :)

vadim5june 05.11.2012 00:19

Цитата:

Сообщение от StanislavZ
И способ решения проблемы реально искал пол дня

Вам нужен API File
http://habrahabr.ru/post/112286/
http://www.html5rocks.com/ru/tutorials/file/dndfiles/

StanislavZ 05.11.2012 00:24

Конкретно у меня сейчас много трудночитаемого коряво-кода с кусками html, поэтому показать не рискну.
Отправка через XMLHttpRequest.
Превью через readAsDataURL.
А инфу взял здесь http://xdan.ru/Working-with-files-in...he-Basics.html

StanislavZ 05.11.2012 00:34

Спасибо. Но API File не нужен, он нужен для построения списка и превью, для чего и использую. Мне не нужно работать с файлами, мне нужно изменить список выбранных в input в сторону уменьшения.
Допустим пользователь выбрал для загрузки картинки 1.jpg, 2.jpg и 3.jpg.
Был построен список из выбранных файлов. И тут он увидел что не хочет отправлять 2.jpg. Вот как удалить его из списка выбранных в input

nerv_ 05.11.2012 00:36

Цитата:

Сообщение от StanislavZ
Превью через readAsDataURL

я бы рекомендовал делать превью на канвасе, т.к. если будут загружены тяжелые изображение и смасштабированыы и их будет много, это негативно скажется на производительности. Можете использовать простой плагин для квери написанный мной. Достаточно передать высоту и/или ширину и на выходе будете иметь канвас-сущность.
Если отправка через XMLHttpRequest, тогда в чем проблема?

Цитата:

Сообщение от StanislavZ
Вот как удалить его из списка выбранных в input

никак. Да и не зачем его удалять. Формируйте массив, объект или привязывайте файлы прямо к DOM элементам с помощью $.data().
Впрочем, если это объект, можно попытаться удалить его свойство используя оператор delete. Только я не уверен, что в этом случае вы не получите сообщения об ошибке.

StanislavZ 05.11.2012 00:49

Наверное действительно придется идти по другому пути, глупо уперся в одно когда нужно обойти. Да я подозреваю что написанный на данный момент код очень сильно засирает память, нужно много доделывать. Ну 2 дня всего ж пишу загрузчик. За плагин спасибо, гляну. Наверное тему можно закрыть

vadim5june 05.11.2012 00:50

Цитата:

Сообщение от StanislavZ
Вот как удалить его из списка выбранных в input

только ApiFileSystem позволяет удалять файлы но он не везде реализован
http://www.html5rocks.com/ru/tutorials/file/filesystem

StanislavZ 05.11.2012 00:55

Методу toCanvas() можно передавать сразу data URI вместо объекта jquery?

nerv_ 05.11.2012 00:58

StanislavZ, он принимает либо объект канвас, либо объект имэйдж.

StanislavZ 05.11.2012 00:59

Да не нужно мне удалять файлы с компа юзера)) Нужно поправит список в value. Ну меня уже переубедили в тупиковости данного пути

StanislavZ 05.11.2012 01:02

Тогда нужно все-таки наверно создавать как сейчас изначально, но потом заменять канвасом?

nerv_ 05.11.2012 01:10

объект Image должен быть, но помещать его в DOM не обязательно (насколько я помню)

StanislavZ 05.11.2012 01:18

function barr(num, status, funcstroke, prbar){
funcstroke = "prbar = $('#fs"+num+"').find('.bar');";
eval(funcstroke);
if(status==1){
prbar.width(15);
};
if(status==2){
prbar.width(25);
};
if(status==3){
prbar.width(45);
};
if(status==4){
prbar.width(65);
};
};

$('[type = submit]').click(function(eve){
eve.preventDefault();
var inputFile = document.getElementById('input').files;
var length = inputFile.length;
var i = 0;
var funcstr;
while(length > i&&i<8){
funcstr = "var form"+i+" = new FormData(); var xhr"+i+" = new XMLHttpRequest(); xhr"+i+".onreadystatechange = function(){ barr('"+i+"',xhr"+i+".readyState); }; form"+i+".append('photo', inputFile["+i+"]); xhr"+i+".open('post', '/s.php', true); xhr"+i+".send(form"+i+");";
eval(funcstr);
i++;
};
});

Вот так выглядит код ответственный за отправку файлов. Подозреваю что криво, но работает. Новый объект XMLHttpRequest приходится создавать каждый раз так как когда отправка всего разом, не получалось сделать отдельные прогресбары для файлов, и на сервер приходило почему-то два запроса, первый пустой. Так все нормально, но подозреваю что страшно замусоривает память.
Наверное попробую сделать так - буду хранить где-то список номеров "удаленных" пользователем файлов и при обходе files их просто не отправлять.
К сожалению эти все плюшки доступны только в chrome, firefox и последней опере. Для других придется доделывать альтернативу.


Часовой пояс GMT +3, время: 16:44.