十七、编辑头像(带参数)

//$('body').on('change', '.upload_image', function(){
//	alert(111);
//
//  var is_length = $('.upload-img-list').length;
//
//  if (is_length > 8) {
//      new $.flavr({
//          title       : '有错误发生:',
//          iconPath    : 'flavr/images/icons/',
//          icon        : 'email.png',
//          content     : '图片最多上传9张',
//      });
//      return
//  }
//  $('.upload_error').html('');
//
//  var file_path = $(this).val();
//  var file_obj = document.querySelector('.upload_image');
//
//  var data = uploadImgAction(this, file_path, file_obj);
//
//  $.ajax({
//      'url': '/upload/image',
//      'type': 'post',
//      'dataType': 'json',
//      'processData': false,
//      'contentType': false,
//      'data': data,
//      'success': function (response) {
//          if (response.status) {
//              // 添加隐藏域,保存存储成功后的物理路径
//              var show_img = '<div class="relative fl upload-img-list">'+
//                                  '<input type="hidden" name="images[]" value="' + response.save_path + '">'+
//                                  '<img src="' + response.save_path +'" class="upload-img-success">'+
//                                  '<span class="upload-del-x">x</span>'+
//                              '</div>';
//              $('.upload-img-box').append(show_img);
//              $('.upload_image').val('');
//          } else {
//              errorMessage(response.error_msg);
//          }
//      }
//  })
//});
var dataParam = [];
function headImg(type) {
	//这个type参数是因为传图片的同时还要传参数,根据type不同写不同的参数,可选
	if(type==1){
		type='bill_user'
	}else{
		type='rec_user'
	}

//  var is_length = $('.upload-img-list').length;
//  console.log
//
//  if (is_length > 8) {
//      new $.flavr({
//          title       : '有错误发生:',
//          iconPath    : 'flavr/images/icons/',
//          icon        : 'email.png',
//          content     : '图片最多上传9张',
//      });
//      return
//  }
    $('.upload_error').html('');

//  var file_path = $(this).val();
//  var file_obj = document.querySelector('.upload_image');
    var file_path = $('#upload-photo').val();
    var file_obj = document.querySelector('#upload-photo');
    var this1 = document.querySelector('#upload-photo');
    var type = type;
    var data = uploadImgAction(this1, file_path, file_obj,type);
    $.ajax({
        url: 'http://ezist.cn/api/users/avatar',
        type: 'post',
        dataType: 'json',
        processData: false,
        contentType: false,
        data: data,
        success: function (response) {
        	debugger
        	window.location.href = "m-personal-center.html"
//      	window.location.href = "personal-data.html"
            dataParam.push(response.flag);
//      	param = response.save_path
//          if (response.status) {
            // 添加隐藏域,保存存储成功后的物理路径
            var param = response.save_path + '1';
            var show_img = '<div class="relative fl upload-img-list">'+
                '<input type="hidden" name="images[]" value="' + response.save_path + '">'+
                '<img id="evaluate-' + response.flag + '"  src="' + response.save_path +'" class="upload-img-success">'+
                '<span class="upload-del-x" id="'+response.flag+'" onclick="deleteImg(\''+ response.save_path +'\',\''+ response.flag +'\')">x</span>'+
                '</div>';
            $('.upload-img-box').append(show_img);
            $('.upload_image').val('');
//          } else {
//              errorMessage(response.error_msg);
//          }
        }
    })
}
//  个人中心上传图片
$('body').on('change', '.per_upload_image', function() {
    var file_path = $(this).val();
    var file_obj = document.querySelector('.per_upload_image');
    var data = uploadImgAction(this, file_path, file_obj);

    $.ajax({
        'url': '/upload/image',
        'type': 'post',
        'dataType': 'json',
        'processData': false,
        'contentType': false,
        'data': data,
        'success': function (response) {
            if (response.status) {
                $('.upload_success').attr('value', response.save_path);
            }
        }
    })
})



// 上传图片方法
function uploadImgAction($this, file_path, file_obj,type) {
    var _file = $this;
    var file = file_obj.files[0];
    // 图片尺寸限制
    if (file.size > 2 * 1024 * 1024) {
        errorMessage('图片尺寸不能超过2M')
    }
    var ext_start = file_path.lastIndexOf('.');
    var ext = file_path.substring(ext_start + 1, file_path.length).toUpperCase();
    // 图片类型限制
    if ($.inArray(ext, ['JPG', 'JPEG', 'GIF', 'BMP', 'PNG']) < 0) {
        errorMessage('图片格式只能为JPG、JPEG、GIF、BMP、PNG');
    }

    var data = new FormData();
    //此处就是要上传给后台的图片加参数data.append()
    data.append('avatar', _file.files[0]);
    data.append('type', type);
    return data;
}
function deleteImg(param,imgPar) {
    var imgArr = $('#' + imgPar);
    $.post('http://ezist.cn/api/bills/image/destroy', {'path': param, 'csrf_token':$('meta[name="csrf-token"]').attr('content')}, function() {
        imgArr.parents('.upload-img-list').remove();
    })
}
// 删除图片
//$('body').on('click', '.upload-del-x', function() {
//	debugger
//  var $this = $(this);
//  var path = $(this).prev().attr('src');
//
//  $.post('/destroy/image', {'path': path, 'csrf_token':$('meta[name="csrf-token"]').attr('content')}, function() {
//      $this.parents('.upload-img-list').remove();
//  })
//})

function errorMessage(message)
{
    $('.upload_error').html(message);
    return;
}

  

posted @ 2018-06-11 14:38  杰_森  阅读(290)  评论(0编辑  收藏  举报