建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery图片上传插件ajaxImageUpload

来源:易助科技网浏览量:10收藏

简介


Query图片上传插件,支持批量上传、预览、删除、放大、上传数量、上传大小、追加方式配置以及上传前、上传后和删除的回调函数。

(下载的附件中附有完整DEMO)


参数说明:


配置项配置说明必选默认值
fileInput上传按钮名,即 input [type=file] 的 name 值
ajaxUrlajax 请求地址
imageUrl已上传的图片连接[]
ajaxData额外携带的 json 数据{}
allowZoom是否允许放大true
allowType允许上传图片的类型["gif", "jpeg", "jpg", "bmp", "png"]
maxNum允许上传图片数量3
maxSize允许上传图片的最大尺寸,单位 M2
appendMethod图片追加方式,before/afterbefore
before上传前回调函数
success单次上传成功回调函数
complete全部上传成功回调函数
error上传失败回调函数


JQuery图片上传插件ajaxImageUpload-示例图1


JQuery图片上传插件ajaxImageUpload-示例图2


使用

1.  引入文件


<link href="./css/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/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值
  ajaxUrl: './upload1.php',
  //上传的服务器地址
});

$(".upload-box2").ajaxImageUpload({
  fileInput: 'file2',
  //上传按钮名,即input[type=file]的name值
  ajaxUrl: './upload2.php',
  //上传的服务器地址
});



相关链接

GitHub 地址:https://github.com/gouguoyin/ajax-image-upload

Gitee 地址 :https://gitee.com/gouguoyin/ajax-image-upload