1***@qq.com
1***@qq.com
  • 发布:2016-06-07 11:54
  • 更新:2018-01-09 09:07
  • 阅读:3304

如何获取这个图片的路径?

分类:MUI

后台


(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 = {        
        imageList: get('image-list'),  
    };  
    ui.clearForm = function() {   
        ui.imageList.innerHTML = '';  
    };  
    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');  
        fileInput.setAttribute('accept', 'image/*');  
        fileInput.setAttribute('id', '' + imageIndexIdNum);  
        fileInput.addEventListener('change', function(event) {  
            var file = fileInput.files[0];  
            if (file) {  
                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 + ')';  
                }  
                reader.readAsDataURL(file);  
                placeholder.classList.remove('space');  
                ui.newPlaceholder();  
            }  
        }, false);  
        placeholder.appendChild(closeButton);  
        placeholder.appendChild(fileInput);  
        ui.imageList.appendChild(placeholder);  
    };  
    ui.newPlaceholder();  
})(mui, window, document, undefined);  

前端
<div id='image-list' class="row image-list">
</div>

2016-06-07 11:54 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

赞一个.

该问题目前已经被锁定, 无法添加新回复