html代码
<div class="media_con Indus_license_up">
<ul class="up_ul">
<!--<li>
<img src="ajaxImageUpload/images/upload.png">
</li>-->
<li id="addFile">
<div class="keyWebload">
<img src="img/up_media.png">
<input type="file" class="webuploader" multiple="multiple" accept="" value="" name="file1">
</div>
</li>
</ul>
</div>
js 代码
//上传图片选择文件改变后刷新预览图
$(".Indus_license_up .webuploader").change(function (e) {
fileItem = e.target.files || e.dataTransfer.files;
var initlen = $(".up_ul li").length -1;//原有的图片数目
var len = fileItem.length;
if(len + initlen >= 8){
len = 8 - initlen;
$("#addFile").css("visibility","hidden");
}
if(len == undefined || len == 0){
return false;
}
for(var i=0;i<len;i++){
fileList.push(fileItem[i]); //将传入的图片push到空对象中
reads(fileItem[i]);
console.log(fileList);
}
})
/**
* 删除图片
* 先后天删除,成功之后前台删除
*/
var DeleFile=[];
var deleteName;//保存删除的图片将其传给后台处理
$(".Indus_license_up .up_ul").on("click","a", function(){
var add = false;
if($(".up_ul li").length >= 8){
add = true;
}
var srcPath =$(this).next("img").attr("src");
var namePath=$(this).next("img").attr("name");
if(srcPath.split("http").length == 1){
//base64图片,还没有上传到后台,要对应删除list里面文件
$(this).parent().remove();
DeleFile.push(namePath);
console.log(DeleFile);
deleteName=DeleFile.join(",");
console.log(deleteName);
if(add){
$("#addFile").css("display","none");
}
return false;
}
var _this = this;
$.ajax({
type: "post",
url: "",
data:{
userId:Islogin,
imagePath:srcPath
},
success: function(res) {
console.log(res);
if(res.code==1){
$(_this).parent().remove();
if(add){
$("#addFile").css("display","none");
}
return false;
}
},
error: function(res) {
console.log(res);
return false;
}
});
});
* 生成预览图
function reads(file) {
//定义一个文件阅读器
var FileName=file.name;
console.log(FileName);
var reader = new FileReader();
reader.readAsDataURL(file);
//文件装载后将其显示在图片预览里
reader.onload = function () {
console.log(fileList);
var oli=$("<li></li>");
var img ='<a><img src="img/dele.png"></a><img src="'+reader.result+'" name="'+FileName+'"/><div>';
oli.prepend(img);
$(".up_ul").prepend(oli);
}
}
限制上传图片的大小不能超过2M
if(fileList[i].size>1024*1024*2){
alert("您上传的图片中含有超过2M的图片,请重新选择");
location.reload();
return;
}
//注意
上传图片时需要在表单里进行上传,独立的不能上传