juliya
10/10/2017 - 3:24 PM
input type file
<input id="" class="js-file" name="" type="file" accept="image/jpeg,image/png,image/gif">
<label class="js-file-label" for="">Browse for File...</label>
/*multiple*/
<div class="chat-form-files js-uploaded-files"></div>
<input id="chat-files" class="js-files-multiple" name="files[]" type="file" multiple>
<label for="chat-files" class="chat-form-files-label js-files-multiple-label">Прикрепить</label>
<div class="form-group-file">
<input id="feedback-files"
class="js-files-multiple"
name="feedback-files[]"
type="file"
data-max-count="20"
data-max-size="41943040"
multiple>
<label for="feedback-files" class="feedback-form-files-label">Загрузить ↑</label>
<p>Максимум 20 файлов общим размером до 40 МБ</p>
</div>
<div class="js-uploaded-files uploaded-files"></div>
<input id="answer-files" class="js-images-multiple" name="files[]" type="file" multiple accept="image/jpeg,image/png,image/gif">
<label for="answer-files" class="answer-form-images-label js-images-multiple-label">Прикрепить
<span>не более 5 изображений</span></label>
<div class="profile-card-images js-uploaded-images">
<div class="profile-card-images-item"></div>
<div class="profile-card-images-item"></div>
<div class="profile-card-images-item"></div>
<div class="profile-card-images-item"></div>
<div class="profile-card-images-item"></div>
</div>
<input id="answer-file-1"
class="js-upload-image"
name="answer-file-1"
type="file"
accept="image/jpeg,image/png,image/gif">
<label for="answer-file-1"
class="profile-card-images-item js-upload-image-label"></label>$('.js-file').change(function() {
var file = $(this),
fileValue = file.val(),
label = file.next('.js-file-label');
if (fileValue !== '') {
label.text(fileValue);
}
});
//new
$('.js-file').change(function () {
var file = $(this);
var fileName = file.get(0).files[0].name;
var label = file.next('.js-file-label');
label.text(fileName);
});
//multiple
if ($('*').is('.js-files-multiple')) {
var uploadedFiles = [];
var uploadedFilesList = $('.js-uploaded-files');
$('.js-files-multiple').change(function () {
if ($(this).get(0).files.length) {
for (var i = 0; i < $(this).get(0).files.length; ++i) {
var currentFile = $(this).get(0).files[i];
uploadedFiles.push(currentFile);
uploadedFilesList.append('<div class="uploaded-file js-uploaded-file">' +
'<span>' + currentFile.name + '</span>' +
'<button class="uploaded-file-remove-btn js-remove-uploaded-file" type="button"></button>'
+'</div>')
}
}
});
$(document).on('click', '.js-remove-uploaded-file', function (e) {
var index = $(e.target).closest('.js-uploaded-file').index();
uploadedFiles.splice(index, 1);
$(e.target).closest('.js-uploaded-file').remove();
console.log(uploadedFiles);
})
}
//размер файлов
if ($('*').is('.js-files-multiple')) {
const maxCount = $('.js-files-multiple').data('max-count');
const maxSize = $('.js-files-multiple').data('max-size');
const uploadedFilesList = $('.js-uploaded-files');
let filesSize = 0;
let uploadedFiles = [];
$('.js-files-multiple').change(function () {
if ($(this).get(0).files.length) {
for (let i = 0; i < $(this).get(0).files.length; ++i) {
const currentFile = $(this).get(0).files[i];
filesSize += currentFile.size;
if (i === maxCount || filesSize > maxSize) {
break
}
let fileSizeInMb = currentFile.size / 1024 / 1024;
uploadedFiles.push({name: currentFile.name, size: currentFile.size});
uploadedFilesList.append('<div class="uploaded-file js-uploaded-file">' +
'<span>' + currentFile.name + ' [' + fileSizeInMb.toFixed(2) + ' Мб]' + '</span>' +
'<button class="uploaded-file-remove-btn js-remove-uploaded-file" type="button"></button>'
+'</div>')
}
}
});
$(document).on('click', '.js-remove-uploaded-file', function (e) {
var index = $(e.target).closest('.js-uploaded-file').index();
filesSize -= uploadedFiles[index].size;
uploadedFiles.splice(index, 1);
$(e.target).closest('.js-uploaded-file').remove();
})
}
if ($('*').is('.js-images-multiple')) {
let uploadedImages = [];
$('.js-images-multiple').change(function () {
const fileInput = $(this);
const uploadedImagesContainer = $(fileInput).closest('.js-images-wrapper').find('.profile-card-images-item');
if (uploadedImages.length === 5) {
$(fileInput).closest('.js-images-wrapper').append('<p class="profile-form-images-error">Можно загрузить не более 5 файлов</p>')
return
}
const files = $(this).get(0).files
if (files.length) {
$(files).each(function (index) {
if (index === 5) {
return
}
const reader = new FileReader();
reader.readAsDataURL(this);
reader.onload = function (e) {
if (uploadedImages.length < 5) {
uploadedImages.push(files[index]);
const img = document.createElement('img');
img.src = reader.result;
img.alt = '';
if (!uploadedImages.length) {
$(uploadedImagesContainer)[index].appendChild(img);
} else {
$(uploadedImagesContainer)[uploadedImages.length - 1].appendChild(img);
}
}
}
});
}
console.log(uploadedImages)
});
}
$('.js-upload-image').change(function () {
if ($(this).get(0).files.length) {
var reader = new FileReader();
var imgContainer = $(this).next('.js-upload-image-label');
reader.readAsDataURL($(this).get(0).files[0]);
reader.onload = function (e) {
let img = document.createElement('img');
img.src = reader.result;
img.alt = '';
$(imgContainer).empty();
$(imgContainer).append(img);
}
}
});input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
//multiple
&-files {
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 10px;
max-height: 80px;
&::-webkit-scrollbar {
width: 10px;
background-color: #ffffff;
}
&::-webkit-scrollbar-thumb {
margin: 0 auto;
.border-radius(4px);
width: 8px;
background-color: #e9e8e8;
}
.uploaded-file {
position: relative;
margin-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
font-weight: 700;
background-image: url("../img/ico-clip.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 22px 20px;
&:last-child {
margin-bottom: 0;
}
&-remove-btn {
position: absolute;
top: 50%;
right: 10px;
margin-top: -7.5px;
width: 15px;
height: 15px;
background-image: url("../img/ico-remove-file.svg");
background-repeat: no-repeat;
background-size: 15px 15px;
&:hover, &:active {
opacity: 0.8;
}
}
}
&-label {
margin-left: 10px;
margin-bottom: 10px;
padding: 7px 0 3px 45px;
font-weight: bold;
background-image: url("../img/ico-clip.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 33px 30px;
}