jquery.imageuploader.js 介绍
jquery.imageuploader.js是一款jquery多 文件 上传 插件 。该jquery多 文件 上传 插件 主要用于 上传 图片 ,它允许你选择 多个图片 文件 ,也可以直接拖拽 图片 到指定区域,然后 显示 图片 的预览图和信息,最后通过Ajax一次性 上传 选择的 图片 到服务器上 。
jquery.imageuploader.js特点
允许指定 上传 图片 文件 的格式。
可以 生成 上传 图片 的 缩略图 预览。
允许通过选择或拖拽进行 图片 选择。
通过ajax请求 上传 图片 到服务器。
上传 文件 的 界面样式 可以完全 自定义 。
jquery.imageuploader.js使用
1、引入
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.imageuploader.js"></script>
<link href="imageuploader.css" rel="stylesheet">
2、html
<div class="uploader__ Box js-uploader__ Box l-center- Box ">
<form action=" 后台 提交的地址" method="POST">
<div class="uploader__contents">
<label class="button button--secondary" for="fileinput">选择 文件 </label>
<input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">
</div>
<input class="button button--big-b ott om" type="submit" value="Upload Selected Files">
</form>
</div>
3、初始化
$('.js-uploader__ Box ').uploader({
//配置参数
});
4、配置参数
参数
默 认值
描述
submitButton cop y
'Upload Selected Files'
提交按钮上 显示 文本
instructions cop y
'Drag and Drop,or'
一级选择的 标签 文本
furtherInstructions cop y
'You can also drop more files,or'
二级选择的 标签 文本
selectButton cop y
'Select Files'
一级选择按钮上的文本
secondarySelectButton cop y
'Select More Files'
二级选择按钮上的文本
dropZone
$('body')
拖拽 文件 的区域, 一个 jquery对象。
fileTypeWhiteList
['jpg','png','jpeg','gif','pdf']
允许选择的 图片 或 文件 格式
badFileTypeMessage
'Sorry,we're unable to accept this type of file.'
发生 上传 错误 时的 提示 文本
ajaxUrl
?/ajax/upload
文件 上传 的ajax地址
网站地址 : http://quickenloans.github.io/jquery-imageuploader-js/
GitHub: https://github.com/QuickenLoans/jquery-imageuploader-js
网站描述: 一款jquery多 文件 上传 插件
jquery.imageuploader.js官方网站
官方网站: http://quickenloans.github.io/jquery-imageuploader-js/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。
查看更多关于jquery.imageuploader.js的详细内容...