后台
(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>
1 个回复
1***@qq.com
赞一个.