Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Узнать количество файлов, выбранных пользователем

Есть форма загрузки нескольких файлов с свойством multiple. Нужно с помощью jquery узнать кол-во файлов, выбранных пользователем.
Ответ:
Код HTML5
1
<input type="file" id="files" multiple>
Код Javascript
1
2
3
$('#files').on('change', function(){
    console.log(this.files.length);
});
Вопрос: Firefox Add-ons - Рандомный выбор строки из файла

Можно ли как-то сделать рандомный выбор строки из файла для расширения Firefox?
Ответ: преобразуйте текст файла в массив его строк arr (используя метод split () с разделителем \n)
определите длину массива (количество строк) var LEN = arr.length
сгенерируйте случайный индекс var randomIndex = Math.round (Math.random () * --LEN)
получайте строку с этим индексом arr [randomIndex]
Вопрос: Выбор случайного количества элементов из множества

Добрый день. Вот возник интерес, как реализовать выбор случайного количества элементов из множества, как-то пока не встречался с такой выборкой, может вы подскажите ?
Простой пример

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<style type="text/css">

	#field {

     position: relative;
     width: 500px;
     height: 300px;
     margin: 2%;
     border: 1px solid black;
 
 }  
	.square {
		 
     float: left;
		 width: 50px;
     height: 50px;
     border: 1px solid black;
    background-color: red;    	
	}

	.yellow {

    background-color: yellow;

  }


</style>
<body>
	<div id="field">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
		<div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
		
	</div>


<script type="text/javascript">
  
window.onload = function() { 


    function  findRandomArr() {

        var allDiv = $('#field > div');
        console.log("allDiv =" + allDiv.length);
        var num = Math.floor(Math.random()* (allDiv.length) ); 
        allDiv.eq(num).addClass('yellow');
    }  

        setInterval(findRandomArr, 1000);

}


</script>
</body>
</html>


Как реализовать что б каждую секунду выбиралась какая-то группа дивов, значение каждый раз разное ( от 1 до divAll.lenght) и перекрашивались в другой цвет. На следующую секунду, те что стали другого цвета возвращались в исходное положение, а появлялась новая группа элементов.
Ответ:
Сообщение от Black_Star
Math.random() > .3 -как его понимать надо
в 70% из 100 сменить класс или примерно максимум 2/3 из числа красных могут поменять класс на жёлтый.
Вопрос: IE11 + скачивание файлов = странное поведение

Всем доброго времени суток.

Есть вэб приложение, которое при клике на кнопку скачивает несколько файлов. Реализуется это путём добавления нужного количества iframe'ов, со ссылками на файлы, в конец страницы. Так вот в IE11 выплыла проблема - если добавлять несколько ифрэймов, браузер выводит сообщение с вопросом о дальнейших действиях пользователя (Открыть или сохранить файл) только для одного файла, загрузки из других ифрэймов при этом игнорируются. Кто-нибудь может подсказать как можно решить такую проблему?
Ответ:
Цитата:
mrsergej, грузи всё в один iframe по очереди.
Тоже об этом думал, но событие onload не срабатывает на ифрэймах, которые загружают файлы, поэтому непонятно как узнать загружен ли файл, чтобы грузить следующий.
Вопрос: Удаление элементов из files[i] (<input multiple="">)

Хочу, чтобы можно было выборочно удалять изображения после добавления их через <input multiple="">.

Но напрямую это сделать видимо нельзя:

"The HTMLInputElement interface [html] has a readonly attribute of type FileList, which is what is being accessed in the above example. Other interfaces with a readonly attribute of type FileList include the DataTransfer interface [html]".

Как можно это обойти и удалять files[i] по клику на .remove?

Извиняюсь за смесь js и jquery:



$(document).ready(function() {

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

$('#fileElem').change(function()
{
  handleFiles(this.files);
});


function bytesToSize(bytes) {
  var kilobyte = 1024;
  var megabyte = kilobyte * 1024;
  var gigabyte = megabyte * 1024;
  var terabyte = gigabyte * 1024;

  if ((bytes >= 0) && (bytes < kilobyte)) {
    return bytes;

  } else if ((bytes >= kilobyte) && (bytes < megabyte)) {
    return (bytes / kilobyte).toFixed(0) + 'K';

  } else if ((bytes >= megabyte) && (bytes < gigabyte)) {
    return (bytes / megabyte).toFixed(1) + 'M';

  } else if ((bytes >= gigabyte) && (bytes < terabyte)) {
    return (bytes / gigabyte).toFixed(2) + 'G';

  } else if (bytes >= terabyte) {
    return (bytes / terabyte).toFixed(2) + 'T';

  }
}


function handleFiles(files) {
  var d = document.getElementById("filelist");
  var list = document.createElement("ul");
  d.appendChild(list);
  for (var i=0; i < files.length; i++) {
    var li = document.createElement("li");
    list.appendChild(li);

    var a = document.createElement("a");
    a.setAttribute('href','#');
    a.setAttribute('alt','');
    li.appendChild(a);

    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(files[i]);;
    img.onload = function() {
      window.URL.revokeObjectURL(this.src);
    }
    a.appendChild(img);

    var name = $("<span class='name'>" + files[i].name + "</span>");
    $(a).append(name);

    var size = $("<span class='size'>" + bytesToSize(files[i].size) + "</span>");
    $(a).append(size);

    var remove = $("<a href='#remove' id=" + i + " class='remove'>remove</a>");
    $(li).append(remove);

  }
}

$('.remove').live("click", function(event) {
  event.preventDefault();
  alert("Handler for .click() called.");
});


});
Ответ: Ну удалять изображения из превьюшек дело же не хитрое, более сложнее удалить изображение из загрузки (если загрузка идет при помощи стандартной кнопки)

Как я реализовал это.
Пользователь нажимает на кнопку загрузки файлов, выбирает нужные, появляются превьюшки выбранных файлов. Далее может еще и еще нажимать на выбор файлов и они будут добавляться к превьюшкам.
Стандартно в html нельзя добавлять новые файлы к уже выбранным, стандартно загрузятся на сервер только последние выбранные. Но... никто не мешает создавать новые поля для файлов.
То есть, пользователь выбрал файлы, они отобразились в списке превьюшек, дальше обычным стилем делаем display:none для input file, и создаем рядом с ним новый input file
Таким образом кажется, что нажимаешь на одну и ту же кнопку и добавляешь новые файлы, а на самом деле каждое добавление происходит от нового input

Ну а как удалять теперь файлы из загрузки, понятно.
При удалении из превьюшки, удаляем весь input type="file" и все.
Но... есть одна проблема, если используете multiple, то файлы удаляться будут группами, сколько было выбрано файлов за один раз, столько и удалиться.
Чтобы можно было удалять файлы по одному, нужно и выбирать их по одному, то есть не использовать multiple. Пусть пользователь добавляет файлы по одному, но зато и удалять их сможет по одному.
Вопрос: Отправка файлов вместе с сообщением

Здравствуйте. Я разрабатываю нечто вроде чата, есть отправка файлов, но необходимо вместе с файлом ещё передавать и сообщение, которое написал пользователь (наглядный пример - ВК).
На данный момент загрузка файлов выглядит так (в JS используется ScriptJava):

HTML5
1
2
3
4
<form id='form_send_file' enctype='multipart/form-data' method='post'>
    <input type='file' name='upload_file[]' multiple/>
</form>
<button id='send' onclick='send_message();'>Send</button>
send_message() :
Javascript
1
2
3
4
$$f({
   formid:'form_send_file',
   url:'dialog_send_message.php',
});
dialog_send_message.php :
PHP
1
2
3
4
5
6
7
8
9
if ($_FILES['upload_file']['size'] > 0) { 
    foreach ($_FILES['upload_file']['error'] as $key => $err) {
        if ($err == UPLOAD_ERR_OK) {            
            $date = date('d.m.Y H:i:s');
            move_uploaded_file($_FILES['upload_file']['tmp_name'][$key],
                __DIR__ .'/uploads/'.$date.'_'.$_FILES['upload_file']['name'][$key]);
        }
    }
}
Спасибо.
Ответ: Balanaar, немного переделал, теперь так:

HTML5
1
2
3
4
<form enctype='multipart/form-data' method='post'>
    <input type='file' id='file' name='upload_file[]' multiple='true'/>
</form>
<button id='send' onclick='send_message();'>Send</button>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function send_message() {   
    var $input = $("#file");
    var fd = new FormData;
 
    fd.append('upload_file', $input.prop('files')[0]);
    fd.append('text', 'asd');
 
    $.ajax({
        url: 'dialog_send_message.php',
        data: fd,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) { alert(data); }
    });
В PHP только изменил алгоритм для работы с одним файлом. Всё работает, но нужно дать возможность загружать несколько файлов. В JS я могу сделать цикл по добавлению файлов с именем параметра "upload_file1", "upload_file2" и т.д., в зависимости от количества файлов, а потом передавать ещё и количество файлов в PHP-скрипт. Но я думаю, вдруг Вы знаете способ получше ?
Вопрос: Select multiple отправка запроса

Доброго времени суток есть следующая форма

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="/prodazha" onsubmit="connectFields(this); return false;" method="get">
 
<div class="column third">
<fieldset id="mse2_tv|rooms" style="padding: inherit;">
 
<select class="selectm" name="tv|rooms" id="mse2_tv|rooms_" multiple="multiple">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
</fieldset>
</div>
 
<button class="button transparent white" type="submit" style="width:132px;">Поиск</button>
</form>
получается при выборе нескольких критерий допустим 1,2 она отправляет запрос rooms=1 rooms=2 . Подскажите как реализовать чтобы она отправляла запрос в таком виде rooms=1,2
Ответ: может

Javascript
1
2
3
4
5
6
7
8
9
10
<script>
$('form').submit(function(event) {
    event.preventDefault();
 
    var values = $(this).find('select').val();
    if (values.length > 0) {
        $.get( "/prodazha", { "rooms": values.join() } );
    }
})
</script>
-->
при выборе 2,3,4 запрос пойдет на

/prodazha?rooms=2%2C3%2C4
Вопрос: Select multiple бросает два события change.

Столкнулся с удивительной проблемой мультиселекта на Chrome на Android.

Есть мультиселект. На нем висит обработчик onchange.
Жмем на select, появляется нативное окошко выбора, выбираем только один option, жмем ОК - срабатывает событие change.
Далее, тыкаем в любое место страницы, снова срабатывает событие change.
(просто убирается фокус с селекта)

Причем, если выбрать несколько option, то событие отрабатывает только один раз, как надо.

Кто-нибудь сталкивался с такой проблемой?

Как устранить повторный выброс события change?
Ответ: SunYang, Dilettante_Pro,
Вопрос: set values multiple select javascript

Помогите на javascript установить несколько значений для multiple select
<select name='strings' id="strings" multiple >
    <option value="0">Test</option>
    <option value="2">Prof</option>
    <option value="3">Live</option>
    <option value="4">Off</option>
    <option value="5">On</option>
</select>


для jQuery такой код $("#strings").val([2, 4, 5]); , а нужно на javascript
Ответ: не пригодилось, не актуально, спасибо за внимание
Вопрос: multiple filter

Всем привет!

Есть страница, на ней таблица, с сервера приходят ~11к записей(nested tree), в таблице они изначально не рендерятся. Над каждым столбцом таблицы есть фильтр(multiple select), соответственно можно фильтровать этот большущий массив. Мне бы хотелось узнать, есть ли какие-нибудь best practise как такое реализовывать.

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

Может кто-нибудь сталкивался, как вообще лучше реализовывать подобные задачи, минус еще в том, что массив большой и при биндинге нокаут подвисает(если выбрано много фильтров)...
Ответ: k2, спасибо :)