十七、编辑头像(带参数)
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 ; } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .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技术实操系列(六):基于图像分类模型对图像进行分类