jquery.imageuploader.js

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-bottom" type="submit" value="Upload Selected Files">

</form>

</div>

3、初始化

$('.js-uploader__Box').uploader({

//配置参数

});

4、配置参数

参数

默认值

描述

submitButtoncopy

'Upload Selected Files'

提交按钮上显示文本

instructionscopy

'Drag and Drop,or'

一级选择的标签文本

furtherInstructionscopy

'You can also drop more files,or'

二级选择的标签文本

selectButtoncopy

'Select Files'

一级选择按钮上的文本

secondarySelectButtoncopy

'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/