jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档

jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
程序包内含使用Demo

完整程序源代码：jQuery图片批量上传插件源码

上传前

上传后

使用方法

1、先引入jquery和插件的css和js，注意先引入jquery

<link href="./css/jquery.upload.min.css" type="text/css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js"></script>
<script src="./js/jquery.upload.min.js"></script>

2、HTML结构

<div class="upload-box1"></div><div class="upload-box2"></div>

3、插件配置

$(".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为例

$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 客户端来处理

参数说明

配置项	配置说明	必选	默认值
`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`	上传失败回调函数	否

完整程序源代码：jQuery图片批量上传插件源码

jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档相关推荐

Android 拍照以及相册中选择(适配高版本)————上传多张照片之压缩处理、在线预览可伸缩放大(二)
______ Introduction ______ 前言上一篇文章刚给大家总结完,关于上传头像的功能.此文章所述主要是关于上传头像的具体流程以及如何对照片做裁剪处理,回调给控件显示:当然重中之重 ...
安卓仿写多玩的《英雄联盟盒子》系列源码（一）——效果预览与前言
一.效果预览: 战绩查看界面: 资讯界面: 资讯内容界面:(暂时读不了图片,界面还未美化) 绑定界面: 查询界面: 二.前言: 这个APP是我一个月前大二实训作品,五天完成的,时间仓促,大部分知识都是 ...
转载：Pixhawk源码笔记七：姿态控制预览
转自:新浪@WalkAnt 第八部分姿态控制预览英文参考:http://dev.ardupilot.com/wiki/apmcopter-programming-attitude-control- ...
PHP如何在微信中聊天_迷你微信私有聊天系统PHP源码支持PC、移动APP
源码简介 DuckChat是一款独立部署的聊天系统,包含服务器程序源代码,以及社交浏览器客户端,服务器搭建完成后,用户可以通过电脑.APP访问你的站点. [独立部署] 你可以自由下载DuckChat聊 ...
分享116个ASP上传下载源码，总有一款适合您
分享116个ASP上传下载源码,总有一款适合您 116个ASP上传下载源码下载链接:https://pan.baidu.com/s/1loHIyl9LUAkyPBedFpkRQw?pwd=fflw ...
分享111个ASP上传下载源码，总有一款适合您
分享111个ASP上传下载源码,总有一款适合您 111个ASP上传下载源码下载链接:https://pan.baidu.com/s/1VaiX2JZqyBue8g_x7bsrZA?pwd=szji ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（32）-swfupload多文件上传[附源码]...
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器 ...
小程序多张图片上传（源码分享+实现分析）
本篇文章以小程序中的代表[微信小程序]为例,分享一下在微信小程序中实现多图上传的源码实现. PS:其它小程序和 uni-app 也可通用该思路实现. 代码片段(可导入微信WEB开发者工具体验):ht ...
QQ透明名片在线上传网站源码
介绍: 最近超流行的QQ透明名片,无需复杂操作,不需要QQ会员,一键就能制作自己的专属名片,超高逼格. 透明名片在线上传网站源码注意事项 1.名片必须恢复默认 2.图片不能太大,过大可以找个好友发 ...

jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档

jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档相关推荐

最新文章

热门文章