SQXY12345_Web/WebChat/js/feedback-pag...

(function (mui, window, document, undefined) {
    mui.init();
    var get = function (id) {
        return document.getElementById(id);
    };
    var qsa = function (sel) {
        return [].slice.call(document.querySelectorAll(sel));
    };
    var ui = {
        question: get('question'),
        contact: get('contact'),
        imageList: get('image-list'),
        submit: get('submit')
    };
    ui.clearForm = function () {
        ui.question.value = '';
        ui.contact.value = '';
        ui.imageList.innerHTML = '';
        ui.newPlaceholder();
    };
    ui.getFileInputArray = function () {
        return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
    };
    ui.getFileInputIdArray = function () {
        var fileInputArray = ui.getFileInputArray();
        var idArray = [];
        fileInputArray.forEach(function (fileInput) {
            if (fileInput.value != '') {
                idArray.push(fileInput.getAttribute('id'));
            }
        });
        return idArray;
    };
    var imageIndexIdNum = 0;
    ui.newPlaceholder = function () {
        var fileInputArray = ui.getFileInputArray();
        if (fileInputArray &&
            fileInputArray.length > 0 &&
            fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
            return;
        }
        imageIndexIdNum++;
        var placeholder = document.createElement('div');
        placeholder.setAttribute('class', 'image-item space');
        var closeButton = document.createElement('div');
        closeButton.setAttribute('class', 'image-close');
        closeButton.innerHTML = 'X';
        closeButton.addEventListener('click', function (event) {
            event.stopPropagation();
            event.cancelBubble = true;
            setTimeout(function () {
                ui.imageList.removeChild(placeholder);
            }, 0);
            return false;
        }, false);
        var fileInput = document.createElement('input');
        fileInput.setAttribute('type', 'file');
        //multiple="true"
        fileInput.setAttribute('class', 'image-box');
        fileInput.setAttribute('accept', 'image/*');
        //fileInput.setAttribute('accept', 'image/*');
        //fileInput.setAttribute('accept', 'image/gif,image/jpeg,image/png,image/jpg');
        fileInput.accept="image/*";
        fileInput.setAttribute('id', 'image-' + imageIndexIdNum);

        fileInput.addEventListener('change', function (event) {
            var file = fileInput.files[0];
            var lengh = document.getElementsByClassName("image-item").length;
            if (lengh < 6) {
                if (file) {
                    //var filename = $("#image-" + imageIndexIdNum).val();
                    //fileName = filename.split("\\")[2];
                    var fileName = file.name;//"";//
                    //alert(fileName);
                    var reader = new FileReader();
                    reader.onload = function () {
                        //处理 android 4.1 兼容问题
                        var base64 = reader.result.split(',')[1];
                        var dataUrl = 'data:image/png;base64,' + base64;
                        placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
                        $.ajax({
                            type: "post",
                            url: huayi.config.callcenter_url + '/Web/Upload64',
                            async: true,
                            dataType: 'json',
                            data: {
                                dataurl: dataUrl,
                                filename: fileName
                            },

                            success: function (data) {
                                if (data.state == "success") {
                                    fileInput.setAttribute('indexs', data.data.F_FileId);
                                    mui.toast('上传成功');
                                }
                            }
                        });
                    }

                    reader.readAsDataURL(file);
                    placeholder.classList.remove('space');
                    ui.newPlaceholder();
                }
            } else {
                mui.toast('最多上传五张');
            }

        }, false);
        placeholder.appendChild(closeButton);
        placeholder.appendChild(fileInput);
        ui.imageList.appendChild(placeholder);
    };
    ui.newPlaceholder();
})(mui, window, document, undefined);