(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"]')); }; //获取图片数组的ID ui.getFileInputIdArray = function() { var fileInputArray = ui.getFileInputArray(); var idArray = []; fileInputArray.forEach(function(fileInput) { if(fileInput.value != '') { idArray.push(fileInput); } }); 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('class', 'image-box '); fileInput.setAttribute('accept', 'image/*'); fileInput.setAttribute('id', 'image-' + imageIndexIdNum); fileInput.addEventListener('change', function(event) { var file = fileInput.files[0]; var Files = fileInput.files; console.log(Files); console.log(file); 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; // var Url ; console.log(dataUrl); placeholder.style.backgroundImage = 'url(' + dataUrl + ')'; console.log(file.path) console.log(file.name) console.log(file.type) $.ajax({ type: "get", url: 'http://192.168.4.18:4120/WxLogin/UpdateFile', async: true, dataType: 'json', data: { filesss: dataUrl, filename: file.name, filesize: file.size, filetype: file.type }, success: function(data) { if(data.state == "success") { fileInput.setAttribute('indexs',data.data); } else { mui.alert(data.message); } } }); } reader.readAsDataURL(file); placeholder.classList.remove('space'); ui.newPlaceholder(); } }, false); placeholder.appendChild(closeButton); placeholder.appendChild(fileInput); ui.imageList.appendChild(placeholder); }; ui.newPlaceholder(); ui.submit.addEventListener('tap', function(event) { }, false); })(mui, window, document, undefined);