html5 头像上传更换插件

所属分类:输入-上传

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

相关插件-上传

Web Uploader文件上传插件

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

拖放文件上传与图像预览插件Dropzone.js

dropzone.js是重量轻的JavaScript库,将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。
  上传
 41934  85

jquery图片上传

图片上传
  上传
 64672  264

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 51845  466

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

    天道酬勤。 0
    2017/3/23 10:28:56

    后台处理成功后   要返回什么东西呢?    现在不知道返回什么  反正就显示parsererror   想上传成功后把这个弹出的页面关掉也不知道怎么关

    回复
    天道酬勤。 0
    2017/3/22 18:37:14

    求回复    我是php   打印$_FILE   是空啊   难道改了上传的路径后还要改别的地方吗?   求知道的人告知我啊~  急啊

    回复
    山 風 0
    2017/3/19 11:23:22
    xuemyi 0
    2017/3/17 14:56:48

    好用  !!!!!!!!!!!

    回复
    ╃ō铱沛??! 0
    2017/3/16 14:47:21

    求分享:codeices@163.com

    回复
    马帅-开天网络 0
    2017/3/10 11:34:33

    没有jq币啊  求分享 402738923@qq.com

    回复
    好运 0
    2017/3/10 9:13:57
    林华征 0
    2017/3/8 15:00:58
    笑那曹操慕小乔 0
    2017/3/8 9:08:49

    上传图片到服务器后,在预览那张图片还没有没裁剪啊

        〃 祝我快乐0
        2017/3/8 17:02:29

        那最后你怎么解决的呢,求解

        小灬路0
        2017/3/17 11:09:36

        同样的问题

    回复
    雨落凡尘只缘情 0
    2017/3/6 10:22:28
取消回复