Об этом лучше подробно в сети найти и почитать, о Ajax загрузке файлов доступной в HTML5. Кратко, это следующее - по событию onload объекта FileReader, который получает содержимое файла выбранного для загрузки в формате base64 (readAsDataURL(f)), это содержимое target.result помещается в созданное изображение im (new Image()).
Именно это и используется и при Ajax загрузке файлов, если нужен предпросомтр изображения, а данные формы отправляются с использованием объекта FormData. В браузерах не поддерживающих HTML5 используется iframe. Есть готовые плагины, в том числе и под jQuery для такой загрузки, ищите в сети их. |
У меня появился ещё один вопрос. Совсем не большой. Как удалить файл?? Скорее всего для этого есть какое то свойстве инпута... конечно вопрос малость глупый но всё же жду ответа на него :) Ну и конечно как я пробовал щас покажу
delete $('#ava').files[0];
Я имею в виду удалить так что бы он на сервер не загружался |
Нет, так не удалить :)
А вот удалить поле выбора файла из формы можно, заменив его новым. |
Я поппытался так сделать но эта работает только 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 это див в котором и находиться элемент
А после его пересоздания событие слетает и абсолютно весь код косающийся данного элемента становиться не рабочим. Как это исправить? |
Ну так создавая элемент вы совсем не задаете обработку события.
Лучше делегировать обработчик родителю, тогда и забот не будет. Например, родитель поля имеет идентификатор box, тогда на jQ, коли его используете:
$('#box').on('change', 'input:file', function() {
//обработка загрузки файла
//если не отвечает условию, то удаляем поле выбора файла
$(this).remove();
//создаем новое
$('#box').append('<input type="file" name="images" class="f_input"/>');
})
|
Вроде должно быть правильно. Но код всё равно работать не хочет. Раньше работоло хотябы 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 Вроде не чего сложного а понять не могу :( |
<!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. Подправил код, чтобы не зависеть хотя бы от изменения атрибутов поля ввода. |
Спасибо! Очень помогли ))
|
'Пожалуйста загрузите картинку приемлемых размеров. В противном слуие вашь файл не будет загружен'
Нужно сообщать тогда какое разрешение доступно, как и какие типы изображений разрешены. |
Да. В этом сообщение будет указана ссылка на FAQ.
|
| Часовой пояс GMT +3, время: 04:19. |