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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
//$('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 @   杰_森  阅读(291)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示