html5 头像上传更换插件

所属分类:输入-上传

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

相关插件-上传

zyupload四种不同的上传PHP版

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

基于Bootstrap 3可预览的HTML5文件上传插件

bootstrapfileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果,可同时选择多个文件。该插件使用bootstrap CSS3样式来制作文件上传界面。并且它提供了多国语言,你可以选择使用中文。
  上传
 73085  224

jQuery多图上传带ajax提交

jQuery多图上传可删除,可以本地预览带前台接口
  上传
 10646  86

上传图片-可裁剪

上传图片可裁剪
  上传
 57731  85

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

    jack_Men 0
    2017/11/17 10:28:26

    真的是很强大的插件。

    回复
    Madmanpure 0
    2017/11/5 19:01:00
    你听我说 0
    2017/11/2 14:57:47

    为什么点击上传不了?  还报错??  求告知

    回复
    灬风吹屁屁凉丶 0
    2017/10/30 12:08:41

    图片太大 上传不了,怎么控制上传图片的大小

    回复
    Coziness「N 0
    2017/10/29 6:29:08
    Destiny 0
    2017/10/25 17:59:08
    没有JQ,,,,求发一份528014762@qq.com 回复
    b0bo波波 0
    2017/10/24 9:57:02
    曾捧梦在手 0
    2017/10/23 21:59:48
    小丑C 0
    2017/10/11 20:07:28
    彼岸花开 0
    2017/10/10 17:37:48
     其实图片也已经上传 并裁剪,保存啦的  为什么 总是报错“”parsererror“”   回复
取消回复