upload

by Yaroslav

HTML

<div class="reviews_head__rating">
		<form action="#" method="post" class="form add_review" enctype="multipart/form-data">
			<!-- write_rev__rating -->
			<div class="write_rev__rating">
				<span>Ваша оценка: </span>
				<div class="rating rating-rev"></div>
			</div>
			<!-- write_rev__rating -->
			<div class="write_rev__input_block">
				<div class="write_success"></div>
				<div class="row">
					<div class="col-sm-6"><input type="text" name="write_name" required="required" class="write_rev__input"  placeholder="Ваше имя*"></div>
					<div class="col-sm-6"><input type="email" name="write_email" required="required" class="write_rev__input"  placeholder="Ваш e-mail*"></div>
				</div>

				<div class="write_rev__texarea">
					<textarea placeholder="Ваш отзыв*" required="required" name="write_text"></textarea>
				</div>

				<div class="write_rev__file ">
					<div class="upload_file--copy">
						<input type="file" id="upload_file" name="upload_file[]" onchange="preview_image();" multiple/>
		  				<label for="upload_file" class="btn-2">Прикрепить изображения</label>
	  				</div>
					<div id="image_preview" class="upload_preview"></div>
					<div id="image_list"></div>
				</div>

				<div class="write_rev__help">* Поля обязательно должны быть заполненными.</div>
				<input type="hidden" name="write_parent" value="0">
				<input type="submit" name="add_review" class="btn btn-two btn_to_review" value="Оставить отзыв">
			</div>
			
		</form>
</div>

CSS

/*off arrow*/
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

/*file upload*/
[type="file"] {
  height: 0!important;
  overflow: hidden!important;
  width: 0!important;
  padding:0!important;
}

[type="file"] + label {
  border: none;
  color: #ff0062;
  cursor: pointer;
  display: inline-block;
  border-bottom: 1px dotted #ff0062;
  font-size: inherit;
  font-weight: 600;
  margin-bottom: 1rem;
  outline: none;
  position: relative;
  transition: all 0.3s;
  vertical-align: middle;
}

.upload_preview img{
  width: 80px;
  margin-right: 10px;
  display: inline-block;
}


.thumb_block{
  margin-top: 20px;
  display: inline-block;
  position: relative;
  font-size: 0;
  overflow: hidden;
}

.thumb-delete:after, .thumb-close:after{
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #33333380;
  display: none;
}

.thumb-delete, .thumb-close{cursor:pointer;}

.thumb-delete:before, .thumb-close:before{
  position: absolute;
  top: 10px;
  right: 10px;
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../img/delete_icon.png);
  background-repeat: no-repeat;
  display: none;
  z-index: 10;
}

.thumb-delete:hover:after, .thumb-close:hover:after, .thumb-delete:hover:before, .thumb-close:hover:before{display: block;}

/*file upload*/

JavaScript

//загрузка изобрежений на отзывах
function preview_image() 
{
 var total_file=document.getElementById("upload_file").files.length;
 var new_img = '';
 //копируем кнопку загрузки (необходимо для загрузки одинаковых изображений)
 var copy = $('.upload_file--copy').html();
  var count_upload = 1;
  count_upload += $('#image_list input').length;

 for(var i=0;i<total_file;i++)
 {
  var fuData = document.getElementById('upload_file');
  var FileUploadPath = fuData.value;

  //Чтобы проверить, загружает ли пользователь какой-либо файл
  if (FileUploadPath == '') {
    alert("Загрузите изображение");
  } else {
    var Extension = FileUploadPath.substring(
    FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

    //Загруженный файл - это изображение
    if (Extension == "gif" || Extension == "png" || Extension == "jpeg" || Extension == "jpg") {
      $('#image_preview').append("<div  class='thumb_block thumb-close'><img class='thumb' src='"+URL.createObjectURL(event.target.files[i])+"'></div>");
      new_img += "<input type='hidden' value='"+FileUploadPath+"' name='rev_img["+count_upload+"]'>";
    } else {
      $( "#fileChooser" ).remove();//Файл не является изображением
      alert("Возможные форматы для загрузки GIF, PNG, JPG, JPEG. ");
    }
 }
}



$('#image_list').append(new_img);

  //отменить загрузку
  $(".thumb-close").on("click", function(){
    $(this).remove();
  });


$('.upload_file--copy').empty();
$('.upload_file--copy').append(copy);

}