ajax 图片上传

exports.upload_img_list = function(){
$(".image-file").live('change',function(){
var url = "/common/upload_img_one";
var files = $(this).prop('files');
var data = new FormData();
var image_input = $(this).parent().siblings(".layui-input-photo").find('.layui-input');
var image_src = $(this).parent().siblings(".layui-input-pic").find('img');
data.append('file',files[0]);
$.ajax({
url:url,
data:data,
type:'POST',
dataType:'json',
processData:false,//数据处理
contentType:false,//内容类型
cache:false,
success:function(result){
if(result.code==200){
image_input.val(result.data);
//判断是否需要预览图
if(imagepreview =='true'){
image_src.attr('src',result.data);
}
layer.msg(result.msg,{time:3000,icon:1});
}else{
layer.msg(result.msg,{time:3000,icon:5});
}
},error:function(result){

}
});
});


//多图上传
$(".img-many-file").change(function() {
var files = $(this).prop('files');
var files_num = $(this).prop('files').length;
var img_input = $(this).parent().siblings(".layui-input-photo").find('.layui-input');
var img_box = $(this).parent().siblings(".layui-pic-box");
var data = new FormData();
for (i = 0; i < files_num; i++) {
data.append('file[]', files[i]);
}
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.ajax({
url: "/common/upload_img_list",
type: "POST",
data: data,
dataType: 'json',
cache: false, //cache设置为false,上传文件不需要缓存
processData: false, // 设置为false。因为data值是FormData对象,不需要对数据做处理
contentType: false, //设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
// beforeSend: function () {
// },
success: function(result) {
if(result.code==200){
var res = result.data;
var img_res = res.substring(0,res.length-1);//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
var img_arr = img_res.split('#');//split() 方法用于把一个字符串分割成字符串数组。
var img_arr_num = img_arr.length;
img_box.empty();
for (i=0; i < img_arr_num; i ++){
img_box.append("<li><img src='" + img_arr[i] + "' /><a class='del-img' title='删除图片' href='javascript:;'>X</a></li>");
if(files_num >1){
img_input.attr('value',res);
}else{
img_input.attr('value',setImgval);
function setImgval(index,attributeValue){
return (attributeValue + img_res + "#" );
}
}
}
layer.close(index);
layer.msg('上传成功',{time:3000,icon:1});
}else{
layer.msg(result.msg,{time:3000,icon:5});
}
},
error: function() {
layer.msg('出错了',{time:3000,icon:5});
}
});
});
//删除图片
$(".del-img").live('click',function(){
var img_attr = $(this).parent().parent().siblings('.layui-input-photo').find('.layui-input');
var img_attr_val = img_attr.attr('value');
var img_val = $(this).siblings('img').attr('src');
if(img_attr_val.indexOf('#')>0){
newimg = img_attr_val.replace(img_val + '#',""); //replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
}else{
newimg = img_attr_val.replace(img_val,""); //replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
}
img_attr.attr('value',newimg);
$(this).parent('li').remove();
});

}
原文地址:https://www.cnblogs.com/ihuangjianxin/p/11124629.html