| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- (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');
- 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 lengh = document.getElementsByClassName("image-item").length;
- if(lengh <6) {
- if(file) {
- var filename = $("#image-" + imageIndexIdNum).val();
- fileName = filename.split("\\")[2];
- // 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;
- var usercode = localStorage.getItem("user"); //获取本地存储
- //image-box
- //
- placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
- $.ajax({
- type: "post",
- // http://192.168.4.18:4010/ 测试
- // http://117.158.196.116:4010/ 外网
- // http://12345.shangqiu.gov.cn:8819/ 正式服务器
- // http://121.196.219.217:8002/ 阿里云服务器
- url: huayi.config.callcenter_url + 'Web/Upload64',
- async: true,
- dataType: 'json',
- data: {
- dataurl: dataUrl,
- usercode: usercode,
- filename:fileName,
- },
- success: function(data) {
- if(data.state == "success") {
- fileInput.setAttribute('indexs', data.data.F_FileId);
- mui.toast('上传成功');
-
- } else {
- mui.alert(data.message);
- }
- }
- });
- }
- 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);
|