1. Я хотел бы преобразовать эту форму в ajax, но похоже, что в моем коде чего-то не хватает. При отправке вообще ничего не происходит.
2. Я также хочу, чтобы функция срабатывала при изменении страницы, когда файл был выбран, чтобы не ждать отправки.
Вот JS.
$('#imageUploadForm').on('submit',(function(e) {
e.preventDefault()
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:$(this).serialize(),
cache:false
});
}));
И HTML с php.
<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="file" style="widows:0; height:0" id="ImageBrowse" hidden="hidden" name="image" size="30"/>
<input type="submit" name="upload" value="Upload" />
<img width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/>
</form>
Ответ 1
Сначала в вашем ajax вызове включите функцию «успеха и ошибки», а затем проверьте, дает ли она вам ошибку или нет?
Ваш код должен выглядеть следующим образом:
$(document).ready(function (e) {
$('#imageUploadForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
}));
$("#ImageBrowse").on("change", function() {
$("#imageUploadForm").submit();
});
});
Ответ 2
HTML код:
<div class="rCol">
<div id ="prv" style="height:auto; width:auto; float:left; margin-bottom: 28px; margin-left: 200px;"></div>
</div>
<div class="rCol" style="clear:both;">
<label > Upload Photo : </label>
<input type="file" id="file" name='file' onChange=" return submitForm();">
<input type="hidden" id="filecount" value='0'>
Вот код Ajax:
function submitForm() {
var fcnt = $('#filecount').val();
var fname = $('#filename').val();
var imgclean = $('#file');
if(fcnt<=5) {
data = new FormData();
data.append('file', $('#file')[0].files[0]);
var imgname = $('input[type=file]').val();
var size = $('#file')[0].files[0].size;
var ext = imgname.substr( (imgname.lastIndexOf('.') +1) );
if(ext=='jpg' || ext=='jpeg' || ext=='png' || ext=='gif' || ext=='PNG' || ext=='JPG' || ext=='JPEG') {
if(size<=1000000) {
$.ajax({
url: "<?php echo base_url() ?>/upload.php",
type: "POST",
data: data,
enctype: 'multipart/form-data',
processData: false, // jQuery не обрабатывает данные
contentType: false // jQuery не устанавливает contentType
}).done(function(data) {
if(data!='FILE_SIZE_ERROR' || data!='FILE_TYPE_ERROR' ) {
fcnt = parseInt(fcnt)+1;
$('#filecount').val(fcnt);
var img = '<div class="dialog" id ="img_'+fcnt+'" ><img src="<?php echo base_url() ?>/local_cdn/'+data+'"><a href="#" id="rmv_'+fcnt+'" onclick="return removeit('+fcnt+')" class="close-classic"></a></div><input type="hidden" id="name_'+fcnt+'" value="'+data+'">';
$('#prv').append(img);
if(fname!=='') {
fname = fname+','+data;
}else {
fname = data;
}
$('#filename').val(fname);
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
} else {
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert(‘ПРОБЛЕМА РАЗМЕРА И ТИПА');
}
});
return false;
} else{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );//Это для сброса значения типа файла
alert('Извините Размер файла превышает 1 Мб');
}
} else{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('Извините, но поддерживается только JPEG|JPG|PNG|GIF тип файла ');
}
} else {
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('Вы не можете загрузить более 6 фотографий');
}
}
Вот код PHP:
$filetype = array('jpeg','jpg','png','gif','PNG','JPEG','JPG');
foreach ($_FILES as $key ) {
$name =time().$key['name'];
$path='local_cdn/'.$name;
$file_ext = pathinfo($name, PATHINFO_EXTENSION);
if(in_array(strtolower($file_ext), $filetype)) {
if($key['name']<1000000) {
@move_uploaded_file($key['tmp_name'],$path);
echo $name;
} else {
echo "Недопустимый размер файла";
}
} else {
echo "Недопустимый тип файла";
}// Это простой код. Он не имеет надлежащей валидации.
На этом загрузка и предварительный просмотр завершены. Теперь, если вы хотите удалить изображение со страницы и из папки, вот код. Часть Ajax:
function removeit (arg) {
var id = arg;
// ПОЛУЧИТЬ ЗНАЧЕНИЕ ФАЙЛА
var fname = $('#filename').val();
var fcnt = $('#filecount').val();
// ПОЛУЧИТЬ ЗНАЧЕНИЕ ФАЙЛА
$('#img_'+id).remove();
$('#rmv_'+id).remove();
$('#img_'+id).css('display','none');
var dname = $('#name_'+id).val();
fcnt = parseInt(fcnt)-1;
$('#filecount').val(fcnt);
var fname = fname.replace(dname, "");
var fname = fname.replace(",,", "");
$('#filename').val(fname);
$.ajax({
url: 'delete.php',
type: 'POST',
data:{'name':dname},
success:function(a){
console.log(a);
}
});
}
Вот часть PHP (delete.php):
$path='local_cdn/'.$_POST['name'];
if(@unlink($path)) {
echo "Успех";
} else {
echo "Ошибка";
}
Ответ 3
Вы можете использовать плагин jquery.form.js для загрузки изображения через ajax на сервер.
Вот пример сценария загрузки изображений jQuery ajax:
(function() {
$('form').ajaxForm({
beforeSubmit: function() {
//проведите валидацию здесь
},
beforeSend:function(){
$('#loader').show();
$('#image_upload').hide();
},
success: function(msg) {
/// при успехе
}
}); })();
Если у вас есть сомнения, обратитесь к следующему руководству по загрузке изображений ajax здесь.
http://www.smarttutorials.net/ajax-image-upload-using-jquery-php-mysql/
Ответ 4
Вот простой способ использования HTML5 и jQuery:
1) включить два файла JS:
<script src="jslibs/jquery.js" type="text/javascript"></script>
<script src="jslibs/ajaxupload-min.js" type="text/javascript"></script>
2) включите CSS, чтобы иметь красивые кнопки:
<link rel="stylesheet" href="css/baseTheme/style.css" type="text/css" media="all" />
3) создайте DIV или SPAN:
<div class="demo" > </div>
4) напишите этот код на своей HTML-странице:
$('.demo').ajaxupload({
url:'upload.php'
});
5) создайте файл upload.php, чтобы иметь код PHP для загрузки данных.
Ответ 5
Загрузка изображений с помощью ajax и проверка формата изображения и загрузка максимального размера:
<form class='form-horizontal' method="POST" id='document_form' enctype="multipart/form-data">
<div class='optionBox1'>
<div class='row inviteInputWrap1 block1'>
<div class='col-3'>
<label class='col-form-label'>Name</label>
<input type='text' class='form-control form-control-sm' name='name[]' id='name' Value=''>
</div>
<div class='col-3'>
<label class='col-form-label'>File</label>
<input type='file' class='form-control form-control-sm' name='file[]' id='file' Value=''>
</div>
<div class='col-3'>
<span class='deleteInviteWrap1 remove1 d-none'>
<i class='fas fa-trash'></i>
</span>
</div>
</div>
<div class='row'>
<div class='col-8 pl-3 pb-4 mt-4'>
<span class='btn btn-info add1 pr-3'>+ Add More</span>
<button class='btn btn-primary'>Submit</button>
</div>
</div>
</div>
</form>
</div>
$.validator.setDefaults({
submitHandler: function (form) {
$.ajax({
url : "action1.php",
type : "POST",
data : new FormData(form),
mimeType: "multipart/form-data",
contentType: false,
cache: false,
dataType:'json',
processData: false,
success: function(data) {
if(data.status =='success') {
swal("Документ успешно загружен!", {
icon: "success",
});
setTimeout(function(){
window.location.reload();
},1200);
}
else
{
swal('Oh noes!', "Ошибка при загрузке документа. Пожалуйста, свяжитесь с администратором ", "error");
}
},
error:function(data) {
swal ( "Ops!" , "ошибка при загрузке документа." , "error" );
}
});
}
});
$('#document_form').validate({
rules: {
"name[]": {
required: true
},
"file[]": {
required: true,
extension: "jpg,jpeg,png,pdf,doc",
filesize :2000000
}
},
messages: {
"name[]": {
required: "Введите имя"
},
"file[]": {
required: "Выберите файл",
extension :'Загружайте только jpg,jpeg,png,pdf,doc'
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.col-3').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
$.validator.addMethod('filesize', function(value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
}, 'Размер файла должен быть менее 2 МБ');
Web
