1) html стандарный, но обязательно указать enctype="multipart/form-data" в форме
[spoiler]
<form id="form-reg" enctype="multipart/form-data"> <input name="userfile" class="userfile" id="userfile" type="file" /> <input type="submit" id="reg_button" value="Регистрация" data-wait="Please wait..." class="form-cta-btn w-button"> </form> |
2) Дальше jquery :
<script type="text/javascript">
// считываем данные о файле с формы на событие оnchange
function readImage ( input ) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
}
}
$('#userfile').change(function(){
readImage(this);
});
// запускаем ajax
$('#form-reg').on('submit',(function(e) {
e.preventDefault(); // остановим отправку формы
var formData = new FormData(this); // получим данные с формы
$.ajax({
type:'POST', // Тип запроса
url: /ajax.php', // Скрипт обработчика - здесь мы сохраняем файл на сервер
data: formData, // Данные которые мы передаем
cache:false, // В запросах POST отключено по умолчанию, но перестрахуемся
contentType: false, // Тип кодирования данных мы задали в форме, это отключим
processData: false, // Отключаем, так как передаем файл
success:function(data){
var obj=$.parseJSON(data);
if(obj.TYPE == "ERROR") {
$('.answer_reg').html('<div style="color: red; text-align: center">' + obj.MESSAGE + '</div>'); // скрипт дал ошибку
}else{
$('.answer_reg').html('<div>Успешно!</div>'); //скрипт отработал успешно
}
},
error:function(data){
console.log(data); //ошибки сервера
}
});
}));
</script>
|