素材牛VIP会员

HTML5头像上传更换裁剪插件

 所属分类:网页特效-UI/布局/瀑布流,图片裁剪,上传

 浏览:1002次-  下载:6次-  评论:2次-  更新时间:2019-01-05
HTML5头像上传更换裁剪插件兼容IE10
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:利用bootstrap样式排版已经点击功能,进行弹窗更换头像。html5 头像上传、更换、剪切插件。

详细介绍

利用bootstrap样式排版已经点击功能,进行弹窗更换头像。modal的div中有form表单提交地址

以下方法由网友提供:

遇到的几个情况希望能帮助到大家,后台情况 ,1,后台先接受到form提交过来的图片,并返回json,他的sitelogo.js有ajax操作,要求返回json格式,并且有

$arr = array ('result'=>路径); 
echo json_encode($arr);

只要后台返回json格式的数据,并且里面有result 字段  路径   

{"result":"upload/1470198980a.png"}

基本上就跑通了

Content - Disposition: form - data;
name = "avatar_data" {
    "x": 112.60000000000001,
    "y": 45.10000000000001,
    "height": 184.86043956043957,
    "width": 184.86043956043957}

在拿到提交过来的裁剪等数据到后台,php用img一系列函数裁剪保存到原路径,覆盖到开始的图片,就完成了,我是这样的思路

文件目录结构

  • bootstrap
    • css
      • ┝ bootstrap-theme.css
      • ┝ bootstrap-theme.css.map
      • ┝ bootstrap-theme.min.css
      • ┝ bootstrap.css
      • ┝ bootstrap.css.map
      • ┝ bootstrap.min.css
    • fonts
      • ┝ glyphicons-halflings-regular.eot
      • ┝ glyphicons-halflings-regular.svg
      • ┝ glyphicons-halflings-regular.ttf
      • ┝ glyphicons-halflings-regular.woff
      • ┝ glyphicons-halflings-regular.woff2
    • js
      • ┝ bootstrap.js
      • ┝ bootstrap.min.js
      • ┝ npm.js
  • cropper
    • ┝ cropper.css
    • ┝ cropper.js
    • ┝ cropper.min.css
    • ┝ cropper.min.js
  • ┝ index.html
  • ┝ jquery-1.10.2.js
  • ┝ logo.jpg
  • sitelogo
    • ┝ sitelogo.css
    • ┝ sitelogo.js

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

tc***ju  
2019年02月22日

666666

回复
zj***ar  
2019年06月23日

手机端显示不友好

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:6
所需牛币:10 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)