# ajax-image-upload **Repository Path**: KuafuRace/ajax-image-upload ## Basic Information - **Project Name**: ajax-image-upload - **Description**: jQuery图片上传插件,支持批量上传、预览、删除、放大、上传数量和尺寸限制以及上传前、上传中和上传后的回调函数。 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: http://www.gouguoyin.cn/ajax-image-upload - **GVP Project**: No ## Statistics - **Stars**: 206 - **Forks**: 60 - **Created**: 2017-08-29 - **Last Updated**: 2025-04-17 ## Categories & Tags **Categories**: jquery-plugins **Tags**: None ## README # ajaxImageUpload 原创jQuery图片上传插件,支持批量上传、预览、删除、放大、上传数量、上传大小、追加方式配置以及上传前、上传后和删除的回调函数。 如果您觉得对您有用的话,别忘了给点个赞哦^_^ ! github:[github.com/gouguoyin/ajax-image-upload](https://github.com/gouguoyin/ajax-image-upload) gitee:[gitee.com/gouguoyin/ajax-image-upload](https://gitee.com/gouguoyin/ajax-image-upload) demo:[www.gouguoyin.com/ajax-image-upload](http://www.gouguoyin.com/ajax-image-upload) ###### 上传前  ###### 上传后  **使用方法** - 1、先引入jquery和插件的css和js,注意先引入jquery ``` ``` - 2、HTML结构 ```
``` - 3、插件配置 ```javascript $(".upload-box1").ajaxImageUpload({ fileInput: 'file1', //上传按钮名,即input[type=file]的name值 postUrl: './upload1.php', //上传的服务器地址 }); $(".upload-box2").ajaxImageUpload({ fileInput: 'file2', //上传按钮名,即input[type=file]的name值 postUrl: './upload2.php', //上传的服务器地址 }); ``` - 4、服务端处理 服务端处理没有特殊的限制,只要服务端接受file表单提交的数据处理后返回json格式数据,上传成功返回的json数据里必须含有code和src,其中code必须为200,src是上传后的图片url,上传失败返回的json数据里必须含有code和msg,其中code为错误码(不能是200),msg为错误信息。 以./upload1.php为例 ```php $file = $_FILES["file1"]; // 要和配置里的fileInput保持一致 if(!isset($file['tmp_name']) || !$file['tmp_name']) { echo json_encode(['code' => 401, 'msg' => '没有文件上传']); return false; } if($file["error"] > 0) { echo json_encode(['code' => 402, 'msg' => $file["error"]]); return false; } $upload_path = dirname(__FILE__) . "/uploads/" . date('Ymd/'); $file_path = "./uploads/" . date('Ymd/'); if(!is_dir($upload_path) && !mkdir($upload_path, 0777, true)){ echo json_encode(array('code' => 403, 'msg' => '上传目录创建失败,请确认是否有权限')); return false; }; if(move_uploaded_file($file["tmp_name"], $upload_path.$file['name'])){ echo json_encode(['code' => 200, 'src' => $file_path . $file['name']]); return true; }else{ echo json_encode(['code' => 404, 'msg' => '上传失败']); return false; } ``` > 推荐使用 [easyhttp——轻量级、语义化、 对 IDE 友好的 HTTP 客户端](https://gitee.com/gouguoyin/easyhttp) 来处理 **参数说明** | 配置项 | 配置说明 | 必选 | 默认值 | | --- | --- | --- | --- | | `fileInput` | 上传按钮名,即input[type=file]的name值 | 是 | | | `postUrl` | post请求地址 | 是 | | | `width` | 图片宽度 | 否 | 150 | | `height` | 图片高度 | 否 | 150 | | `imageUrl` | 已上传的图片连接 | 否 | [] | | `postData` | 额外携带的json数据 | 否 | {} | | `allowZoom` | 是否允许放大 | 否 |true | | `allowType` | 允许上传图片的类型 | 否 | ["gif", "jpeg", "jpg", "bmp", "png"] | | `maxNum` | 允许上传图片数量 | 否 | 3 | | `maxSize` | 允许上传图片的最大尺寸,单位M | 否 |2 | | `appendMethod` | 图片追加方式,before/after | 否 | before | | `before` | 上传前回调函数 | 否 | | | `success` | 单次上传成功回调函数 | 否 | | | `complete` | 全部上传成功回调函数 | 否 | | | `delete` | 删除图片回调函数 | 否 | | | `error` | 上传失败回调函数 | 否 | | **更新日志** ##### 2021-07-05 * 新增delete()回调函数, ##### 2020-04-30 * ajaxUrl参数改名为postUrl * ajaxData参数改名为postData * 新增width参数,用于控制上传后显示图片的宽度 * 新增height参数,用于控制上传后显示图片的高度 ##### 2020-03-30 * 解决图片名里含有多个.时图片格式验证失败的BUG * 鼠标放在上传图标上时新增pointer鼠标样式 * 优化CSS样式,删除无用的样式 * 优化complete()函数判断逻辑 ##### 2020-03-28 * 解决allowZoom设置为false时无法删除图片的BUG * 新增已上传图片配置参数imageUrl,该参数主要用于编辑时展示之前已经上传的图片 * 新增追加方式配置参数appendMethod,可以指定上传图片在已有图片前面追加还是后面追加 ##### 2020-03-25 * 重写CSS样式,CSS类名前加ggy_前缀,以防止CSS污染 * 解决同一个页面只能使用一次的BUG * 解决同一个文件二次上传无效的BUG * 解决上传图片验证失败后必须刷新页面才能重新上传的BUG * 新增批量上传功能 * 新增批量上传成功回调函数complete,在所有图片上传成功后会触发 **Todo List** - [x] 批量上传 - [x] 图片放大 - [ ] 去掉jquery依赖 - [ ] 裁剪压缩 - [ ] 拖拽排序