Удалить изображение из превью

349

23 января 2017, 21:03

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

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>

Answer 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
        }
    })
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Локальный NPM репозиторий

Есть множество проектов на одной машине, которые тянут за собой почти одни и те же зависимостиЕсть ли возможность установить node_modules не на уровне...

572

javascript