Проблема такая: как только я выбираю файл/файлы, они сразу заливаются на сервер, а если
скрипт окружить document.getElementById('feedback-form').onsubmit = function(){...}
, то не работает. В общем, файлы должны загружаться после нажатия на кнопку. Подскажите, в чем проблема и как исправить.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<style>
#preloader {visibility: hidden;}
</style>
<form action="" enctype="multipart/form-data" id="feedback-form" method="POST">
<input id="file" type="file" multiple="multiple" name="file[]" />
<div id="preloader"><img alt="loader" src="preloader.gif" /></div>
<div id="info"></div><!-- сюда будет выводится информация о заливке -->
<input type="submit" name="add" id="add" value="Загрузить" />
</form>
<script>
$('#preloader').hide();
$('#file').bind('change', function(){
var data = new FormData();
var error = '';
jQuery.each($('#file')[0].files, function(i, file) {
if(file.name.length < 1) {
error = error + ' Файл имеет неправильный размер! ';
} //Проверка на длину имени
if(file.size > 3000000) {
error = error + ' File ' + file.name + ' is to big.';
} //Проверка размера файла
//if(file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg' ) {
// error = error + 'File ' + file.name + ' doesnt match png, jpg or gif';
// } //Проверка типа файлов
data.append('file-'+i, file);
});
if (error != '') {$('#info').html(error);} else {
$.ajax({
url: 'upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
beforeSend: function() {
$('#preloader').show();
},
success: function(data){
$('#info').html(data);
$('#preloader').hide();
}
});
}
})
</script>
</body>
</html>