html5 头像上传更换插件

所属分类:输入-上传

 173806  1331  查看评论 (529)
分享到微信朋友圈
X
html5 头像上传更换插件 ie兼容10

利用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一系列函数裁剪保存到原路径,覆盖到开始的图片,就完成了,我是这样的思路

相关插件-上传

上传图片-可裁剪

上传图片可裁剪
  上传
 117862  388

zyupload四种不同的上传PHP版

PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。
  上传
 94695  400

jQuery移动端多图上传(带裁剪功能)

适应于手机端上传图片的功能,附带上传图片裁剪功能
  上传
 40103  355

基于HTML5的jquery文件上传插件

这个插件是照着uploadify的api文档写的
  上传
 291942  624

讨论这个项目(529)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    郭朋飞 0
    2023/11/1 20:27:01
    自己用官方的演示改了一个 使用Blob 方式直接提交 也可以使用base64 只需要提交一次就可以了 回复
    云儿 0
    2023/8/3 11:46:03
    大佬可以分享一下吗? 回复
    网虫≮代 0
    2023/7/18 16:15:07
    泛白的夜 0
    2023/6/4 17:11:59
    这个不错,要是能加个限制上传大小就更好了 回复
    cleanING 0
    2020/11/19 11:05:04
    大脸猫长胡须 0
    2020/5/5 23:03:05
    有大佬分享一份的吗 邮箱 1625785320@qq.com 回复
    云飘荡 0
    2020/3/9 22:40:02
    请问上传请求中这两个参数有什么用啊!avatar_src和avatar_data,avatar_src是空的,avatar_data是这样的数据:{"x":174.49572283573465,"y":6.3306249912224555,"height":303.7957986338901,"width":303.7957986338901,"rotate":0},而且上传的图片是原图,不是被剪切后的图片,而且我的上传的三个不同预览容器不能显示为选择的图片,不知道怎么回事,希望大家可以解答一下,谢谢! 回复
    Extraterrestrial 0
    2019/6/25 15:09:29
    parsererror?竟然报错了,有点尴尬
        云儿0
        2023/8/3 11:46:35
        不能用的嘛
    回复
    ?酤 0
    2019/5/27 0:56:12
    真麻烦 自己用官方的演示改了一个 使用Blob 方式直接提交 也可以使用base64 只需要提交一次就可以了 还要两次 回复
    . 0
    2019/4/20 21:26:40
    求大神分享 1304717104@qq.com 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复