Web

Ajax. Загрузка изображения

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

Лучшие бесплатные платформы для создания сайтов без особых навыков

Web

Создание файла CSV для пользователя на PHP

Web

Функция PHP для генерации UUID v4

Web

Как и где устанавливается $ _SERVER ['APP_DEBUG'] в Symfony >= 5.1?

×