一个简单的多图片上传，就无聊练练手，因为后台还没给借口，所以今天早上还是很闲的，淡定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> </head> <style> </style> <body> <div class="mudiv"> <div class="extradiv" style="position: relative;float: left;box-sizing: border-box;margin: 10px;border: 1px solid blue;"> <svg t="1526607814384" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2213" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 200px;height: 200px;position: absolute;left: 0;top: 0;"> <defs> <style type="text/css"></style> </defs> <path d="M733.9904 678.4zM448.5376 422.4128a31.8592 31.8592 0 0 0-31.7184-32.0128 31.8592 31.8592 0 0 0-31.7184 32.0128 31.872 31.872 0 0 0 31.7184 32 31.872 31.872 0 0 0 31.7184-32z m306.5984 177.2288V358.4c0-35.3408-28.4032-64-63.4368-64H332.2368C297.2032 294.4 268.8 323.0464 268.8 358.4v320c0 35.3408 28.4032 64 63.4368 64h359.4624c35.0336 0 63.4368-28.6592 63.4368-64v-78.6304l0.064-0.064-0.064-0.064zM289.9456 358.4c0-23.5648 18.9312-42.6624 42.2912-42.6624h359.4624c23.36 0 42.2912 19.0976 42.2912 42.6624v219.8528l-112.128-113.4464-146.7392 155.8144-71.5904-72.4096-113.5872 114.9056V358.4z m444.0576 320c-0.0128 23.5648-18.944 42.6624-42.304 42.6624H332.2368c-20.9536 0-38.2464-15.424-41.5872-35.6224l3.4304 3.4688 109.4528-110.7456 71.9616 72.8192 146.7392-155.84 111.7696 113.088V678.4z" fill="#211613" p-id="2214"></path> </svg> <input accept="image/*" id="extraimage" type="file" style="width: 200px;height: 200px;float: left;display: block;border:1px solid #000000;left: 0;top: 0;opacity: 0;" /> </div> <div style="clear:both;"></div> </div> </body> <script> var refreshlist = []; //存放所有图片的数组 //若是数组内部有数据，则直接放置在页面上 window.onload = function() { refreshlisttoview(); } document.querySelector(".mudiv").onclick = function(e) { //删除功能 if(e.target.className == "spanclear") { console.log(e.target.dataset.myid); //清除一个 refreshlist.splice(e.target.dataset.myid, 1); refreshlisttoview(); } //查看 if(e.target.className == "magnify") { console.log(e.target.dataset.myid); var str = refreshlist[e.target.dataset.myid]; //直接全屏查看 } }; //图片切换事件 document.querySelector(".mudiv").onchange = function(e) { var cachelist = []; //当用户点击的是最后的一张添加的话 if(e.target.id == "extraimage") { //获取图片的大小 var reader = new FileReader(); reader.readAsDataURL(e.target.files[0]) reader.onload = function(evt) { var image = new Image(); image.src = evt.target.result; image.onload = function(ie) { cachelist.width = this.width * 200 / this.height + "px"; cachelist.height = "200px"; var fileObj = e.target.files[0]; var formData = new FormData(); var image = new Image(); formData.append('file', fileObj); var ajax = new XMLHttpRequest(); ajax.open("POST", "http://web.ll80.com/api/oss/one", true); ajax.setRequestHeader('Authorization', "token c619e01cd7864858878126e506c448c1jhbcp04c"); ajax.send(formData); ajax.onreadystatechange = function() { if(ajax.readyState == 4) { if(ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) { var obj = JSON.parse(ajax.responseText); console.log(obj.url); cachelist.url = obj.url; refreshlist.push(cachelist); refreshlisttoview(); //开始上传图片 } } } } } } //替换的情况 else { var reader = new FileReader(); reader.readAsDataURL(e.target.files[0]) reader.onload = function(evt) { var image = new Image(); image.src = evt.target.result; image.onload = function(ie) { cachelist.width = this.width * 200 / this.height + "px"; cachelist.height = "200px"; var fileObj = e.target.files[0]; var formData = new FormData(); var image = new Image(); formData.append('file', fileObj); var ajax = new XMLHttpRequest(); ajax.open("POST", "http://web.ll80.com/api/oss/one", true); ajax.setRequestHeader('Authorization', "token c619e01cd7864858878126e506c448c1jhbcp04c"); ajax.send(formData); ajax.onreadystatechange = function() { if(ajax.readyState == 4) { if(ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) { var obj = JSON.parse(ajax.responseText); console.log(obj.url); cachelist.url = obj.url; refreshlist[e.target.dataset.myid] = cachelist refreshlisttoview(); //开始上传图片 } } } } } } //如果触发的对象是最后的文本上传的话，则在数组中添加1 } //将数据刷新到页面上去 refreshlisttoview = function() { console.log(refreshlist); var f = document.querySelectorAll(".mydiv").length; console.log(f); while(document.querySelectorAll(".mydiv").length > 0) { document.querySelectorAll(".mydiv")[0].parentNode.removeChild(document.querySelectorAll(".mydiv")[0]); } for(var i = 0; i < refreshlist.length; i++) { // for(var i = 0; i < 5; i++) { var divid = "mydiv" + i; var classname2 = "myimage" + i; var div1 = document.createElement("div"); div1.id = divid; div1.className = "mydiv"; div1.style = "position: relative;float: left;box-sizing: border-box;margin: 10px;border: 1px solid blue;float:left:10px;"; document.querySelector(".mudiv").insertBefore(div1, document.querySelector(".extradiv")); var img1 = document.createElement("img"); img1.src = refreshlist[i].url; img1.className = "pic"; img1.dataset.myid = i; img1.style = "float: left;display: block;border:1px solid #000000;left: 0;top: 0;position:absolute;"; img1.style.width = refreshlist[i].width; img1.style.height = refreshlist[i].height; div1.appendChild(img1); var file1 = document.createElement("input"); file1.accept = "image/*"; file1.type = "file"; file1.dataset.myid = i; file1.style = "float: left;display: block;border:1px solid #000000;left: 0;top: 0;opacity: 0;"; file1.style.width = refreshlist[i].width; file1.style.height = refreshlist[i].height; div1.appendChild(file1); //删除图标 var soan1 = document.createElement("span"); soan1.style = "cursor:pointer;width:30px;height:30px;background-color:red;position:absolute;right:0;top:0;line-height:25px;font-size:30px;font-weight:700;color:#ffffff;text-align:center;" soan1.textContent = "x"; soan1.className = "spanclear"; soan1.dataset.myid = i; div1.appendChild(soan1); //查看图标 var img2 = document.createElement("img"); img2.src = "img/magnify.png"; img2.className = "magnify"; img2.dataset.myid = i; img2.style = "width: 30px;height: 30px;float: left;display: block;border:1px solid #000000;right: 0px;top: 170px;position:absolute;"; div1.appendChild(img2); } } //所有的图片加载完毕后，直接修改所有的file的大小 function refreshinputsize() { document.querySelector(".") } </script> </html>没有用jq，而外需要的是一张图片而且。只是暂时做了上传的，当然，借口还是大家自己去弄吧，这个肯定是已经过期的借口了
测试完毕，再见
