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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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