0

Пытаюсь удалить изображение с превью оно чиститься в классе но на сервер попадает вот пример

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#image').attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}
$("#photo").change(function() {
  readURL(this);
});
$('#delete').click(function() {

  $('#image').remove(); // Удаляем превью

});
$("#multiform").submit(function(e) {
  var formObj = $(this);
  var formURL = formObj.attr("action");




  if (window.FormData !== undefined) // for HTML5 browsers
  {



    var formData = new FormData(this);
    $.ajax({
      url: formURL,
      type: "POST",
      data: formData,
      mimeType: "multipart/form-data",
      contentType: false,
      cache: false,
      processData: false,
      success: function(data, textStatus, jqXHR) {
        alert('rtrth');
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert('1111');
      }
    });
    e.preventDefault();
  }

});
.input-file-row-1:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.input-file-row-1 {
  display: inline-block;
  margin-top: 25px;
  position: relative;
}
html[xmlns] .input-file-row-1 {
  display: block;
}
* html .input-file-row-1 {
  height: 1%;
}
.upload-file-container {
  position: relative;
  width: 100px;
  height: 137px;
  overflow: hidden;
  background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
  float: left;
  margin-left: 23px;
}
.upload-file-container:first-child {
  margin-left: 0;
}
.upload-file-container > img {
  width: 93px;
  height: 93px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.upload-file-container-text {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #719d2b;
  line-height: 17px;
  text-align: center;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 35px;
}
.upload-file-container-text > span {
  border-bottom: 1px solid #719d2b;
  cursor: pointer;
}
.upload-file-container input {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 1px;
  opacity: 0;
  filter: alpha(opacity=0);
  margin: 0;
  padding: 0;
  border: none;
  width: 70px;
  height: 50px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="multiform" id="multiform" action="multi-form-submit.php" method="POST" enctype="multipart/form-data">
  Name:
  <input type="text" name="name" value="" />
  <br/>Age :
  <input type="text" name="age" value="" />
  <br/>Image :
  <input type="file" id="photo" class="photo" name="photo" />
  <br/>
  <button class="btn btn-info" id="multi-post">Run Code</button>
</form>
<img id="image" src="#" alt="" />
<div id="delete">delete</div>

4
  • Непонятно что именно то не работает. В сниппете картинка корректно загружается и меняется. 22 янв 2017 в 19:16
  • спросил разработчика плагина, и как понял что б зараотало нужно плагин переписать, не работает вот что допустим у вас форма подачи объявлений и вам нужно что бы форма срабатывала в случае если текст попал в инпуты а картинку по те или иным причинам не грузят
    – Koly
    22 янв 2017 в 19:22
  • надо не грузить кратинку???
    – L. Vadim
    22 янв 2017 в 19:23
  • да, в одном случае человек загрузит картинку в другом нет
    – Koly
    22 янв 2017 в 19:26

1 ответ 1

1

Ошибка в том, что удаляя превью, ты не удаляешь данные формы.

Чтобы корректно удалялось, нужно склонировать например инпут куда вставляется картинка:

$('#delete').click(function() {

  $('#image').remove(); // Удаляем превью

  //Заменяем инпут на чистый (без картинки) клонированием
  $('#photo').replaceWith($('#photo').clone()); 

  //Или вот так можно почистить
  $('#photo').get(0).reset();

});

Среди прочего не вижу большого смысла в данном случае использовать FormData; Можно отправить на сервер обычную переменную - в таком случае код намного проще и понятнее.

$('#photo').on('change', function(event){

    var $this = $(this);
    $this.replaceWith($this.clone()); //Сразу чистим инпут

    var file_name = $(this).attr('name'); //Прямо на инпуте можно задать имя файла


    var reader = new FileReader();
    var f = event.target.files[0],
        nameArr = event.target.files[0]['name'].split('.'),
        extension = nameArr[nameArr.length-1].toLowerCase();

    //Проверяем какие расширения файла разрешены
    var allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'pdf'];

    if (allowedExtensions.indexOf(extension) == -1) {
        return alert('Недопустимое расширение файла');
    }

    reader.onload = function(e) {
        var contents = e.target.result;
        contents = contents.split('base64,')[1]; //на сервер не нужно отправлять начало содержимого

        sendFileAsBinary(file_name, extension, contents);
    };

    reader.readAsDataURL(f);
})


//Функция отправки файла
function sendFileAsBinary(file_name, extension, img) {

    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();

            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    percentComplete = parseInt(percentComplete * 100);

                       //Процент загрузки можно отобразить

                    if (percentComplete === 100) {
                      //Закончили загрузку
                    }

                }
            }, false);

            return xhr;
        },
        url: '/ссылка',
        type: 'POST',
        data: {
            name: file_name, //название файла
            img: img, //это бинарный текст файла
            extension: extension //это его расширение чтобы на сервере создать нужный файл
        },
        dataType: 'json',
        success: function(data){

            //Успешно отправили
        },
        complete: function(data) {

           //Сюда нужно вставлять функции по завершении загрузки - оно сработает позднее чем success
        }

    })

}
2
  • спасибо, просто сам решил попытаться свой костылик спилить , поучится , но еще раз большое спасибо
    – Koly
    22 янв 2017 в 19:35
  • самое важное тут понимать - что Filereader отдает текстовую строку, содержимое любого графического (в данном случае) с приклееным словом base54 впереди. Отрезаешь слово - получаешь реальное содержимое файла, которое можно тупо сохранить в файл с нужным расширением и получится картинка. Так что в топку все плагины - это просто содержимое файла, которое можно отправлять на сервер как душа захочет. 22 янв 2017 в 19:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.