说下主要的逻辑，首先是利用input type="file"，上传文件，然后判断文件类型是否是图片，这里要注意（multiple，安卓一次一张，ios可以多张）。
接着把本地图片转为base64发给后端，后端返回url，我们把它保存在数组里面，最后发给后端的是一个数组（里面放url）。删除操作也是一样，把数组里面对应的删掉就可以啦。
css：
* {margin: ;padding: ;}
/*图片上传*/
html,body {width: %;height: %;}
.container {width: %;height: %;overflow: auto;clear: both;}
.z_photo {width: 5rem;height: 5rem;padding: .3rem;overflow: auto;clear: both;margin: 1rem auto;border: 1px solid #;}
.z_photo img {width: 1rem;height: 1rem;}
.z_addImg {float: left;margin-right: .2rem;}
.z_file {width: 1rem;height: 1rem;background: url(z_add.png) no-repeat;background-size: % %;float: left;margin-right: .2rem;}
.z_file input::-webkit-file-upload-button {width: 1rem;height: 1rem;border: none;position: absolute;outline: ;opacity: ;}
.z_file input#file {display: block;width: auto;border: ;vertical-align: middle;}
/*遮罩层*/
.z_mask {width: %;height: %;background: rgba(, , , .);position: fixed;top: ;left: ;z-index: ;display: none;}
.z_alert {width: 3rem;height: 2rem;border-radius: .2rem;background: #fff;font-size: .24rem;text-align: center;position: absolute;left: %;top: %;margin-left: -.5rem;margin-top: -2rem;}
.z_alert p:nth-child() {line-height: .5rem;}
.z_alert p:nth-child() span {display: inline-block;width: %;height: .5rem;line-height: .5rem;float: left;border-top: 1px solid #ddd;}
.z_cancel {border-right: 1px solid #ddd;}
html：
<div class="container">
<!-- 照片添加 -->
<div class="z_photo">
<div class="z_file">
<input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
</div>
</div>
<!--遮罩层-->
<div class="z_mask">
<!--弹出框-->
<div class="z_alert">
<p>确定要删除这张图片吗？</p>
<p>
<span class="z_cancel">取消</span>
<span class="z_sure">确定</span>
</p>
</div>
</div>
</div>
js：
<script type="text/javascript">
//px转换为rem
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= ) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = * (clientWidth / ) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); function imgChange(obj1, obj2) {
//获取点击的文本框
var file = document.getElementById("file");
//存放图片的父级元素
var imgContainer = document.getElementsByClassName(obj1)[];
//获取的图片文件
var fileList = file.files;
//文本框的父级元素
var input = document.getElementsByClassName(obj2)[];
var imgArr = [];
//遍历获取到得图片文件
for (var i = ; i < fileList.length; i++) {
var imgUrl = window.URL.createObjectURL(file.files[i]);
imgArr.push(imgUrl);
var img = document.createElement("img");
img.setAttribute("src", imgArr[i]);
var imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
imgAdd.appendChild(img);
imgContainer.appendChild(imgAdd);
convertImgToBase64(imgUrl, function(base64Img){
// Base64DataURL
console.log(base64Img)
//发请请求，把base64转为url，然后存到数组里面
});
};
imgRemove();
}; function imgRemove() {
var imgList = document.getElementsByClassName("z_addImg");
var mask = document.getElementsByClassName("z_mask")[];
var cancel = document.getElementsByClassName("z_cancel")[];
var sure = document.getElementsByClassName("z_sure")[];
for (var j = ,k = ; j < imgList.length; j++) {
imgList[j].index = j;
imgList[j].onclick = function() {
var t = this;
mask.style.display = "block";
cancel.onclick = function() {
mask.style.display = "none";
};
sure.onclick = function() {
mask.style.display = "none";
t.style.display = "none";
/*删除图片,删掉数组里面对应的index*/
console.log(t.index)
}; }
};
};
//将本地图片转为base64
function convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,,);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
</script>