html <div id="goodsUpload"></div> 改造了tinyImgUpload这个插件 用的是vue 所以先绑定数据 this.filesList = tinyImgUpload('#goodsUpload'); 再在提交的时候把数据读出来 let formData = new FormData(document.querySelector('form')); for(let o=0;o<this.filesList().length;o++){ formData.append('task.issueImageOneFile',this.filesList()[o]) } 改过的插件文件 /** * tinyImgUpload * @param ele [string] [生成组件的元素的选择器] * @param options [Object] [对组件设置的基本参数] * options具体参数如下 * path 图片上传的地址路径 必需 * onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需 * onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需 * @return [function] [执行图片上传的函数] * 调用方法 * tinyImgUpload('div', options) */ function tinyImgUpload(ele, options) { // 判断容器元素合理性并且添加基础元素 var eleList = document.querySelectorAll(ele); if(eleList.length == 0){ console.log('绑定的元素不存在'); return; }else if(eleList.length>1){ console.log('请绑定唯一元素'); return; }else { eleList[0].innerHTML ='<div id="img-container" >'+ '<div class="img-up-add img-item"> <span class="img-add-icon">+</span> </div>'+ '<input type="file" name="files" id="img-file-input" multiple>'+ '</div>'; var ele = eleList[0].querySelector('#img-container'); ele.files = []; // 当前上传的文件数组 } // 为添加按钮绑定点击事件,设置选择图片的功能 var addBtn = document.querySelector('.img-up-add'); addBtn.addEventListener('click',function () { document.querySelector('#img-file-input').value = null; if(ele.files.length>=9){ alert("最多选择9张图片") return false; } document.querySelector('#img-file-input').click(); return false; },false) // 预览图片 //处理input选择的图片 function handleFileSelect(evt) { var files = evt.target.files; var filesNum = document.querySelectorAll("#img-container .img-thumb").length + files.length console.log(filesNum); if(filesNum>=9){ alert("最多选择9张图片") return false; } for(var i=0, f; f=files[i];i++){ // 过滤掉非图片类型文件 if(!f.type.match('image.*')){ continue; } // 过滤掉重复上传的图片 var tip = false; for(var j=0; j<(ele.files).length; j++){ if((ele.files)[j].name == f.name){ tip = true; break; } } if(!tip){ // 图片文件绑定到容器元素上 ele.files.push(f); var reader = new FileReader(); reader.onload = (function (theFile) { return function (e) { var oDiv = document.createElement('div'); oDiv.className = 'img-thumb img-item'; // 向图片容器里添加元素 oDiv.innerHTML = '<img class="thumb-icon" src="'+e.target.result+'" />'+ '<a href="javscript:;" class="img-remove">删除</a>' ele.insertBefore(oDiv, addBtn); }; })(f); reader.readAsDataURL(f); } } } document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false); // 删除图片 function removeImg(evt) { if(evt.target.className.match(/img-remove/)){ // console.log('3',ele.files); // 获取删除的节点的索引 function getIndex(ele){ if(ele && ele.nodeType && ele.nodeType == 1) { var oParent = ele.parentNode; var oChilds = oParent.children; for(var i = 0; i < oChilds.length; i++){ if(oChilds[i] == ele) return i; } }else { return -1; } } // 根据索引删除指定的文件对象 var index = getIndex(evt.target.parentNode); ele.removeChild(evt.target.parentNode); if(index < 0){ return; }else { ele.files.splice(index, 1); } // console.log('4',ele.files); } } ele.addEventListener('click', removeImg, false); // 上传图片 function uploadImg() { // console.log(ele.files); return ele.files /* var xhr = new XMLHttpRequest(); var formData = new FormData(); for(var i=0, f; f=ele.files[i]; i++){ formData.append('files', f); } console.log('1',ele.files); console.log('2',formData); xhr.onreadystatechange = function (e) { if(xhr.readyState == 4){ if(xhr.status == 200){ options.onSuccess(xhr.responseText); }else { options.onFailure(xhr.responseText); } } } xhr.open('POST', options.path, true); xhr.send(formData);*/ } return uploadImg; } #img-container {margin-top: 1rem;} #img-container:after { content: '.'; display: block; height: 0; visibility: hidden; overflow: hidden; clear: both; } .img-item { position: relative; float: left; margin-right: 0.3875rem; margin-bottom: 0.3875rem; height: 6.1remrem; width: 6.1remrem; box-sizing: border-box; } .img-thumb { border-radius: 3px; } .thumb-icon { width: 100%; height: 100%; } .img-up-add { display: table; border: 1px dashed #E0E0E0;cursor: pointer; } .img-add-icon { display: table-cell; vertical-align: middle; text-align: center; font-size: 3rem; } .img-remove { position: absolute; left: 0; bottom: 0; display: block; width: 6.1rem; height: 1.3rem; background: rgba(0, 200, 254, 0.63); color: #fff; text-align: center; text-decoration: none; font-size: 0.7rem;line-height: 1.3rem;letter-spacing: .3rem; overflow: hidden; background-clip: padding-box; } .img-remove:hover{text-decoration: none;color: #fff;} #img-file-input { display: none; } #msgInfo{left: 50%;margin-left: -122px;}
评论 (2 )
最新评论
上面的代码放进你的页面就好了吧,这个网站的附件很不稳定
有demo吗?