当前位置: 首页 > news >正文

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

//$('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+'" οnclick="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;
}

  

转载于:https://www.cnblogs.com/deng-jie/p/9166951.html

相关文章:

  • 完全检查点 (normal checkpoint)
  • name 'admin' is not defined第一个问题,新建Django项目,运行时报错
  • zxing 扫一扫 实用工具效率很高
  • Wireshark抓包工具使用
  • Android性能优化之APK瘦身详解(瘦身73%)
  • php课程 6-22 字符串格式化函数有哪些(精问)
  • java程序员进阶:618大战前夕,一条SQL引发的深思—MySQL优化
  • kafka 发送消息使用反射调用方法
  • kubernetes基础概念(第二节)
  • postMan测试https接口
  • 深入理解javascript系列(七):闭包(1)
  • Spring cloud 安全部署与性能优化
  • GEF入门实例_总结_06_为编辑器添加内容
  • CIKERS Shane 20190605
  • py 6.13
  • [deviceone开发]-do_Webview的基本示例
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • CSS 提示工具(Tooltip)
  • download使用浅析
  • SpiderData 2019年2月23日 DApp数据排行榜
  • uni-app项目数字滚动
  • 从0实现一个tiny react(三)生命周期
  • 回流、重绘及其优化
  • 如何利用MongoDB打造TOP榜小程序
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • ​520就是要宠粉,你的心头书我买单
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • $.each()与$(selector).each()
  • (173)FPGA约束:单周期时序分析或默认时序分析
  • (2020)Java后端开发----(面试题和笔试题)
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • (react踩过的坑)antd 如何同时获取一个select 的value和 label值
  • (初研) Sentence-embedding fine-tune notebook
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (附源码)springboot人体健康检测微信小程序 毕业设计 012142
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (论文阅读11/100)Fast R-CNN
  • (深入.Net平台的软件系统分层开发).第一章.上机练习.20170424
  • (十二)python网络爬虫(理论+实战)——实战:使用BeautfulSoup解析baidu热搜新闻数据
  • (四)Controller接口控制器详解(三)
  • (提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (原創) 博客園正式支援VHDL語法著色功能 (SOC) (VHDL)
  • (源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模
  • (转载)hibernate缓存
  • .htaccess 强制https 单独排除某个目录
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)
  • .NetCore项目nginx发布
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)
  • .net图片验证码生成、点击刷新及验证输入是否正确
  • .NET学习教程二——.net基础定义+VS常用设置
  • .pyc文件还原.py文件_Python什么情况下会生成pyc文件?
  • @ResponseBody