话不多说直接上代码(不过只是其中的一段核心代码块)
html
<div class="chuans">
<form class="uploadImg" enctype="multipart/form-data" method="POST">
<input class="file1" type="file" name="file1" id="file1" >
</form>
<div>
<img class="upimg" src="__INDEX__/img/ins/chuanzhenm.png" alt="" data-imgsrc="__INDEX__/img/ins/chuanzhenm.png">
<span class="delx Hui-iconfont"></span>
</div>
</div>
js
$("body").on("change","div.chuans input.file1",function(){
var reads = new FileReader();
var f = $(this).get(0).files[0];
console.log(f)
var rep = /jpeg|png|gif|bmp/ig;
var gstyle = f.type.split("/")[1];
if(rep.test(gstyle)){
reads.readAsDataURL(f);
var that = this;
reads.onload = function(e) {
$('.upimg').attr("src",this.result)
$('.delx').show();
};
}else{
layer.msg("图片格式不正确,请上传 jpeg|png|gif|bmp 格式的图片")
}
$('.file1').val('')
var formDate = new FormData();
formDate.append("file", f);
console.log(f)
$.ajax({
url: '上传图片的接口',
type: "POST",
data: formDate,
processData: false,
contentType: false,
success: function(data) {
data = JSON.parse(data)
imageUrl = data[0].prefix + '' + data[0].smallUrl;
console.log(data[0].prefix)
}
})
});
//删除图片
$("body").on("click","span.delx",function(){
var odatasrc = $(this).parents(".chuans div").find("img").data("imgsrc");
var osrc = $(this).parents(".chuans div").find("img").attr("src");
$(this).parents(".chuans div").find("img").attr("src",odatasrc);
$(this).hide();
$(this).parents(".chuans div").find("input").val("");
});