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 МБ');

 

Схожие статьи

Как переопределить стиль в CSS: знакомство с CSS для новичков
Web

Как переопределить стиль в CSS: знакомство с CSS для новичков

Web

Получение элементов DOM по имени класса

Web

Как использовать символы Юникода в PHP строках

Web

Как восстановить сериализованную строку, которая была повреждена из-за неправильной длины счетчика байтов

×