html5 头像上传更换插件

所属分类:输入-上传

 66387  577  查看评论 (399)
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一系列函数裁剪保存到原路径,覆盖到开始的图片,就完成了,我是这样的思路

相关插件-上传

js上传图片预览

js上传图片本地预览
  上传
 44730  178

Web Uploader文件上传插件

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。 采用大文件分片并发上传,极大的提高了文件上传效率。
  上传
 137395  308

BootstrapFileInput 图片上传插件 详解

样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用
  上传
 217454  125

基于HTML5的jquery文件上传插件

这个插件是照着uploadify的api文档写的
  上传
 117910  217

讨论这个项目(399)回答他人问题或分享插件使用方法奖励jQ币

    灿灿大叔 0
    2017/7/20 16:55:17
    为啥我图片路径为空呀? 回复
    0
    2017/7/19 22:43:10
    小彬 0
    2017/7/5 16:34:46

    尝试评论

        踯躅0
        2017/7/13 10:46:41

        13200

    回复
    纯洁の羽落君 0
    2017/6/27 23:36:23
    oldghost‘’ 0
    2017/6/8 18:40:27

    JAVA怎么用的,为什么点击保存修改 上面会出现 一行 粉红色的 报错蓝,提交地址也提交不出去

        oldghost‘’0
        2017/6/8 19:22:10

        parsererror     的问题怎么解决,求指教!

        ╃→_だ?。人在征途0
        2017/6/15 10:26:24

        点点滴没q了

    回复
    ???祆 0
    2017/6/8 16:59:55

    手机上不怎么流畅!希望加点手机操作的改进!谢谢

    回复
    塞外雪客 0
    2017/6/8 14:26:01
    鬼斗boy 0
    2017/6/7 15:58:45

    旋转后后上传为哈不起作用??

        小易0
        2017/6/8 14:06:03

        怎么下不了

    回复
    awefwaf 0
    2017/6/1 13:10:18

    选取截取区域时可以选择到图片外部不知能否改进,谢谢作者

    回复
    awefwaf 0
    2017/5/31 21:06:20

    有bug..当选择了图片后退出弹出界面,再次点击图片打开弹出界面的时候左侧的大图是新图,右侧小图却都是老图

    回复
取消回复