一个简单的多图片上传，就无聊练练手，因为后台还没给借口，所以今天早上还是很闲的，淡定
<!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="https://www.w3.org/2000/svg" p-id="2213" xmlns:xlink="https://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", "https://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", "https://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><!
