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;
            }