Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 19.10.2015, 19:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Об этом лучше подробно в сети найти и почитать, о Ajax загрузке файлов доступной в HTML5. Кратко, это следующее - по событию onload объекта FileReader, который получает содержимое файла выбранного для загрузки в формате base64 (readAsDataURL(f)), это содержимое target.result помещается в созданное изображение im (new Image()).

Именно это и используется и при Ajax загрузке файлов, если нужен предпросомтр изображения, а данные формы отправляются с использованием объекта FormData. В браузерах не поддерживающих HTML5 используется iframe. Есть готовые плагины, в том числе и под jQuery для такой загрузки, ищите в сети их.
Ответить с цитированием
  #22 (permalink)  
Старый 20.10.2015, 19:29
Интересующийся
Отправить личное сообщение для artiom4356 Посмотреть профиль Найти все сообщения от artiom4356
 
Регистрация: 08.07.2015
Сообщений: 16

У меня появился ещё один вопрос. Совсем не большой. Как удалить файл?? Скорее всего для этого есть какое то свойстве инпута... конечно вопрос малость глупый но всё же жду ответа на него Ну и конечно как я пробовал щас покажу
delete $('#ava').files[0];

Я имею в виду удалить так что бы он на сервер не загружался

Последний раз редактировалось artiom4356, 20.10.2015 в 19:32.
Ответить с цитированием
  #23 (permalink)  
Старый 20.10.2015, 20:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Нет, так не удалить
А вот удалить поле выбора файла из формы можно, заменив его новым.
Ответить с цитированием
  #24 (permalink)  
Старый 21.10.2015, 09:31
Интересующийся
Отправить личное сообщение для artiom4356 Посмотреть профиль Найти все сообщения от artiom4356
 
Регистрация: 08.07.2015
Сообщений: 16

Я поппытался так сделать но эта работает только 1 раз. То есть вот он выводит сообщение мол файл не тот и пересоздёт вот по такому приципу
$('#ava').remove();

			var	inp2 = document.createElement( 'input' );
			inp2.type = 'file';inp2.name = 'images'; 
			inp2.id = 'ava';inp2.class = 'f_input';
			document.getElementById( 'TdAvaPerent' ).appendChild( inp2 );//TdAvaPerent это див в котором и находиться элемент

А после его пересоздания событие слетает и абсолютно весь код косающийся данного элемента становиться не рабочим. Как это исправить?
Ответить с цитированием
  #25 (permalink)  
Старый 21.10.2015, 10:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну так создавая элемент вы совсем не задаете обработку события.
Лучше делегировать обработчик родителю, тогда и забот не будет. Например, родитель поля имеет идентификатор box, тогда на jQ, коли его используете:

$('#box').on('change', 'input:file', function() {
    //обработка загрузки файла
    //если не отвечает условию, то удаляем поле выбора файла
    $(this).remove();
    //создаем новое
    $('#box').append('<input type="file" name="images" class="f_input"/>');     
})
Ответить с цитированием
  #26 (permalink)  
Старый 21.10.2015, 14:05
Интересующийся
Отправить личное сообщение для artiom4356 Посмотреть профиль Найти все сообщения от artiom4356
 
Регистрация: 08.07.2015
Сообщений: 16

Вроде должно быть правильно. Но код всё равно работать не хочет. Раньше работоло хотябы 1 раз после открытия страници... щас же
<div id="TdAvaPerent"><input type="file" name="images" class="f_input" id="ava"/></div>

$('#TdAvaPerent').on('change', 'input:file', function() {
	alert('YYY');// Проверял событие.... однака оно вообще не происходит. Не выводица.
        if(window.FileReader) {
            var im = new Image(), r = new FileReader(), f = this.files[0], type = f.type;
			if(type=='image/jpeg'){
			r.readAsDataURL(f);
            r.onload = function(e) {
                im.onload = function() {
				if(this.width>200 || this.height>200){
				alert('Пожалуйста загрузите картинку приемлемых размеров. В противном слуие вашь файл не будет загружен');
				
$(this).remove();
   
    $('#TdAvaPerent').append('<input type="file" name="images" class="f_input" id="ava"/>');
				}
                    
                }
                im.src = e.target.result;
            }
            }else{
			alert('Вы ошиблись файлом. Загрузите изображение.В противном слуие вашь файл не будет загружен');
			
	$(this).remove();
    $('#TdAvaPerent').append('<input type="file" name="images" class="f_input" id="ava"/>');
			}
        } else {
		alert('Произошла ошибка! Просим вас срочно обратиться к одному из системынх адмнинистраторов проекта с указанием такого индефекатора index653-670');

        }
    });

P.S Вроде не чего сложного а понять не могу

Последний раз редактировалось artiom4356, 21.10.2015 в 14:07.
Ответить с цитированием
  #27 (permalink)  
Старый 21.10.2015, 16:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
var oP = $('#TdAvaPerent').on('change', 'input:file', function() {
        if(window.FileReader) { //это проверка на поддержку браузером данного объекта
            var im = new Image(), r = new FileReader(), f = this.files[0]; 
            
            //типы загружаемых изборажений указаны в поле file,
            //по его значению готовим рег. выражение для проверки
            if(f.type.match(new RegExp(this.accept.replace(/,/,'|')))){
                r.readAsDataURL(f);
                r.onload = function(e) {
                    im.onload = function() {
                        if(this.width>200 || this.height>200){
                            alert('Пожалуйста загрузите картинку приемлемых размеров. В противном слуие вашь файл не будет загружен');
                            clearFile(oP)
                        }
                    }
                    im.src = e.target.result;
                }
            } else {
                alert('Вы ошиблись файлом. Загрузите изображение. В противном случае вашь файл не будет загружен');
                clearFile(oP)
            }
        } else alert('Ваш браузер устарел, установите ... и ссылки на ресурсы, и срочно обращаться к ... не требуется');
    });
});
//иначе могут плодится поля выбора файла
function clearFile(o) {
    o.html('<input ' + $.map(o.children().get(0).attributes, function(v) {
        return v.name + '="' + v.value + '"'
    }).join(' ') + '>')
}
</script>     
</head> 
<body>
<div id="TdAvaPerent"><input type="file" name="images" class="f_input" accept="image/jpeg,image/png"/></div>
</body> 
</html>


id="ava" - не нужен вообще, если ни где-то более не используется.
accept="image/jpeg,image/png" - разрешенное для выбора в диалоге выбора файла, правда не все браузеры будут отображать именно изображения в папках, но по этому атрибуту производится проверка (см. в скрипте).

PS. Подправил код, чтобы не зависеть хотя бы от изменения атрибутов поля ввода.

Последний раз редактировалось laimas, 21.10.2015 в 17:53.
Ответить с цитированием
  #28 (permalink)  
Старый 21.10.2015, 19:00
Интересующийся
Отправить личное сообщение для artiom4356 Посмотреть профиль Найти все сообщения от artiom4356
 
Регистрация: 08.07.2015
Сообщений: 16

Спасибо! Очень помогли ))
Ответить с цитированием
  #29 (permalink)  
Старый 21.10.2015, 19:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

'Пожалуйста загрузите картинку приемлемых размеров. В противном слуие вашь файл не будет загружен'

Нужно сообщать тогда какое разрешение доступно, как и какие типы изображений разрешены.
Ответить с цитированием
  #30 (permalink)  
Старый 21.10.2015, 19:30
Интересующийся
Отправить личное сообщение для artiom4356 Посмотреть профиль Найти все сообщения от artiom4356
 
Регистрация: 08.07.2015
Сообщений: 16

Да. В этом сообщение будет указана ссылка на FAQ.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отмена .preventDefault() или возобновление события нажатия на клавишу клавиатуры antserg jQuery 15 13.06.2017 23:14
Очистка памяти, отмена загрузки картинки, отмена события. zhurchik Общие вопросы Javascript 16 23.10.2014 12:48
Отмена события по нажатию на Enter Valentinka_1 jQuery 12 01.08.2013 01:30
отмена повторного выполнения события frant32 Events/DOM/Window 13 06.10.2012 11:25
Отмена события preventDefault() , поясните пожалуйста namez jQuery 3 15.04.2010 13:54