bootstrap3 文件上传插件fileinput中文说明文档
2015-09-25 10:54
483 查看
file input插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能，完全没有理由不去使用，但是国内很少能找到本插件完整的使用方法，于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅。另外附上一段调用方发和servlet端的接收代码，未完待续。
引言：
一个强化的HTML5 文件输入插件，适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览，并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap
CSS3样式。通过对很多种文件提供预览支持，比如图片，文本，html，视频，声音，flash和对象，它大大增强了文件输入的功能。另外，它还包含基于AJAX的上传，拖拽，移除文件的功能，可视化的上传进度条，和可选择的添加或删除文件预览功能。
提示：本插件致力于使用大量在添加jquery下的css3和html5功能，强调：你可能会发现css3或html5或它两个的混合在许多实现中被需要。
本插件最早受一篇博文和Jasny'sFile Input plugin启发。但是本插件现在已经添加的好多功能和强化，为开发者提供了一个成熟并且完整的文件管理工具和解决方案。
伴随着4.0.0版本的发布，本插件现在支持被多种现代化浏览器支持的，基于Ajax，利用html5 Formdata和XHR2协议的上传。而且她也拥有了对在服务器端基于AJAX的文件删除原生内置支持。因此它可以添加更加强大的功能，联机添加、移除文件。本插件也对大多数现代浏览器添加了拖拉，移除支持。它也已经为Ajax上传提供原生支持。万一，浏览器不支持FormData或XHR2，本插件会降级成一个普通表单。
文件输入功能：
1. 本插件将会把一个简单的HTML file input转换称一个先进的文件选取控制器。对于没有jquery和javascript支持的浏览器会退回一个普通的HTML
file input。
2. File input由一下三个部分以及选项和范例组成，来控制显示
文件标题部分：来显示一个简短的被选文件的信息
文件活动按钮部分：用于浏览，移除，上传文件
文件预览部分：用来在客户端显示这个被选择的文件（支持图片，文本，flash和视频类文件）。其他类型的文件会被按照普通缩略图显示。
3. 本插件自动的转换一个具有 type = file的input成为一个先进的文件选择器
input如果你设置class = file。所有的input选项会被以html5 data
属性传递。
4. 能顾选择和预览多重文件，利用html5 file reader api来读取并且预览文件。万一许多文件被选择
，将会显示文件加载进度在预览区域。
5. 提供定义好的模板和css样式，并且可以按照你的需求来改变；
6. 1.5.0以上版本你可以配置本插件来显示一个图片、文件的初始化预览，并且伴随着初始标题（对记录上传情景更加有用）.参考initialPreview和initialCaption属性选项部分来配置本功能；
7. 可以选择显示或隐藏底下的任意一个功能：
标题部分
预览部分
上传按钮
移除按钮
8. 定制目标容器元素的地点来展示整个插件，标题容器，标题文本，预览容器，预览图片，和预览地位。
9. 对于文本预览，自动收缩文本到预览图的宽度，并且展示一个收缩的指示器链接来悬浮展示完整的文本，你可以定制这个收缩指示器。
10. 定制被选择的预览，进度和备选文件的提示信息
11. 上传动作默认是一个表单提交，支持基于自定义Ajax上传上传到远程服务器动作参数。
12. 为更进步的开发提供Jquery事件触发器。现在已经支持Filereset，fileclear,filecleared,
fileloaded, and fileerror.事件
13. 支持Disabled和只读文件
14. 超出容器的长文件名可以动态的自动改变文件标题大小。
15. 在图像完整的加载到预览区域之后，建立了新的fileimageuploaded事件
16. 当图片大小查处了预览区域的面积时自动改变预览图像的大小。
17. 为满足开发者的需求配置file-input提供完整的模板和扩展性。
18. 智能预览支持多种文件类型，内置的文件支持种类是：图像，文本，html，视频，音频，flash，对象，压缩文件和其他。
19. allowedPreviewTypes：你能够配置所有的被预览文件类型，默认是['image',
'html', 'text', 'video', 'audio', 'flash','object']。因此所有的文件类型默认被以object来预览。比如如果只预览
20. allowedPreviewMimeTypes：在添加了allowedPreviewTypes属性后，你也能控制被预览的所有mime类型。这个属性默认是null，意味着支持所有的mime类型。提示：在2.5.0版本释放时候，你能通过设置
21. layoutTemplates：可你让你用一个属性配置所有的布局模板设置。能够被配置的布局对象为：
22. previewTemplates：对于每个预览类型，所有的预览模板 (
and
23. previewSettings：允许你对每个预览图片配置宽度和高度，本插件有默认的宽度和高度，已经被提前定义好，比如图像，文本，html。。。
24. fileTypeSettings：能够让你利用一个回调函数配置并且识别每个预览的文件类型，本插件有默认的回调函数，已经被提前定义好去识别每种类型，比如图片，文本。。。
25. 增强了模板中的替代标签，利用本版本，它将会自动的对每个标签检查多重事件来替换一个模板字符串。
26. 在任意的事件中，操作事件并且轻松的添加你自己的习惯验证消息，利用返回值来终值上传。
27. 支持各种语言翻译和本地化操作。
提示：flash预览需要安装Shockwave flash插件并且被客户端浏览器支持。本flash预览目前这能被webkit浏览器成功的支持。视频或者音频格式被所有支持html5音视频标签的现代浏览器所支持。切记html5只能支持有限周磊的视频和音频标签，比如mp4,
webm, ogg, mp3, wav，并且视频文件的大小推荐越小越好（可以通过maxFileSize属性来控制）确保大小不会影响到预览的性能，你可以从examples目录复制一些文件（在这个插件里），来测试一些falsh或视频文件的案例。
1. 添加利用html5 formdata基于ajax上传功能，如果浏览器不支持会降级成普通表单文件提交。
2. 为了使用ajax上传，必须在js中设置uploadUrl属性。
3. 增强了插件可以让文件被添加，粘附，移除（基于FEEDBACK ）。因此用户可以粘附文件到预览区域
4. 新的拖拽区域可以拖拉文件到预览区域并且被粘附上。
5. 删除或者上传文件一个一个的或者几个文件一起。
6. 如果showPreview属性被设置成false，或者uploadUrl不支持插件，会自动降级成普通表单格式。
7. 为等待上传中的文件设置了可配置的指示器，比如文件成功上传还有文件上传失败。
8. 基于ajax的上传可以添加额外的表单。
9. 上传进度条和每个文件独立的略缩图上传指示
10. 能共取消甚至终止正在进行的ajax上传。
11. 增进初始预览内容，你能够设置初始预览动作（为初始预览删除提供预建支持）。其他的自定动作按钮也能够被设置初始预览图
12. 尽管本插件上层功能最优的的利用了html5和jquery功能，但仍确保插件大小依靠并且最适性能。
13. 只要ajax上传结束，自动的根据来自服务器的内容尽快刷新预览内容。
$ bower install bootstrap-fileinput
$ php composer.phar requirekartik-v/bootstrap-fileinput "dev-master"
或者添加
"kartik-v/bootstrap-fileinput":"dev-master"
到你的composer.json文件
2.最新版本的jquery
3.最新版的浏览器，支持html5fileinput，还有filereader api 包含css3和jquery。
4.为了文件预览能正常工作，浏览器必须支持html5filereaderApi 否则本插件将会自动降级成一个普通file input。对ie浏览器，开发者必须适用ie10一张版本，ie9及以下版本将会降级成普通fileinput，而且也不会支持多文件选择或者html5 filereader API。
5. 4.0版本之后，ajax上传被支持，ajax上传需要浏览器支持html5formdata 和XHR2 (XMLHttpRequest 2)，多数浏览器支持这两个。如果浏览器不支持，本插件会自动降级成普通表单并且不支持ajax上传。
模式一表单提交：
在这种模式中，你不要设置uploadUrl属性。本插件会利用原生的 file input来储存文件并且它能够被独处在一个普通表单提交之后(你必须把这个input放在一个form里面)。这种模式对于单个文件上传非常有效，或者简单情景下的多文件上传。配置是直接的正如你能读出所有的被post从一个原生的表单提交的数据。但是，提示你这个原生file
input是制度的并且不能被外部的代码修改或者更新。尤其是对于多文件input选择，一个新文件不能添加到一个已经存在的文件选择列表里面。如果你常识去选择文件从一个已经选好的file input，它将会被重写并且清除之前的选项，简单的来说，在此模式下，在上传之前你不能有选择的移除或者删除已经被添加文件。
模式二 ajax提交：在这个模式下，你必须用一个有效的ajax处理服务器url设置uploadUrl属性。如果uploadUrl被设置好了，然后本插件会自动认为这是个ajax上传情景。本插件为ajax提交提供了许多先进的功能，而且这些功能在表单提交下是没有用的。功能像拖拽文件，在预览区域添加、移除文件，而且进度条功能只能在本模式下使用。
你的浏览器必须支持HTML5FormData/XHR2，而且你的服务器代码处理ajax请求必须返回一个有效的json回复。
提示，在一个先进的模式下，本插件允许你处理ajax上传即使没有文件被选择，但是一个有效的uploadExtraData会被发送伴随着ajax响应。这些事件
control，但是如果你独立的初始化这个插件经由js，然后不要再添加css样式在这个input上（正如它将会调职重复的初始化并且这个js代码可能会被跳过）
1. 第一步：加载下面这些设置到header里去
2. <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"rel="stylesheet">
3. <linkhref="path/to/css/fileinput.min.css"media="all"rel="stylesheet"type="text/css"/>
4. <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
5. <!--canvas-to-blob.min.js is only needed if you wish to resize images beforeupload.
6. This must be loaded beforefileinput.min.js -->
7. <scriptsrc="path/to/js/plugins/canvas-to-blob.min.js"type="text/javascript"></script>
8. <scriptsrc="path/to/js/fileinput.min.js"type="text/javascript"></script>
9. <!--bootstrap.js below is only needed if you wish to use the feature of viewingdetails
10. of text file preview via modal dialog-->
11. <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"type="text/javascript"></script>
12. <!--optionally if you need translation for your language then include
13. locale file as mentioned below -->
14. <scriptsrc="path/to/js/fileinput_locale_<lang>.js"></script>
如果你注意到了，你需要额外的加载jquery.min.js和bootstrap.min.css，为了fileinput.min.css和fileinput.min.js。本地文件fileinput_locale_<lang>.js可以有选择的添加如果你需要翻译成你的语言的话。
提示：canvas-to-blob.min.js文件是JavaScript-Canvas-to-Blob
plugin by blueimp的源文件，它需要在fileinput.min.js之前被加载，如果你需要使用本插件的图像重新设置大小功能，为了轻松的接入， JavaScript-Canvas-to-Blob这个插件源码已经被包含在这个项目的js/plugins文件夹里。
第二步 a:在你的页面上初始化这个插件，如下
1. // initializewith defaults默认初始化
2.
3. $("#input-id").fileinput();
4.
5. // with pluginoptions带插件选项的初始化
6. $("#input-id").fileinput({'showUpload':false,'previewFileType':'any'});
#input-id是你页面上的input的id属性，比如（type=file，这个会被本插件自动的隐藏）。
第二步 b：可选择的，你能够直接的给任何一个input设置插件的选项，通过html5
data属性在你的input标签里
1. <inputid="input-id"type="file"class="file"data-preview-file-type="text">
异步上传：
这是默认的模式，通过把uploadAsync属性设置为true。当上传多个文件的时候，这个异步模式允许对每个文件触发平行的服务器请求。你能够控制文件上传数量的最大数在同事上传通过设定maxFileCount属性，在异步模式下，在预览框里的每个略缩图的进度条是有效的而且更新的。
收到数据（服务器端）
你的服务器方法应该如uploadUrl里设置的一样
从本插件收到下面的数据
1、 文件数据：这个被发向服务器的数据在一个非常普通的表单file input格式，比如在php中，你可以读取这个数据如：$_FILES['input-name']，input-name是你input标签的name属性。如果你不给你的input标签设置一个name属性，那么它默认是file_data。提示：多个文件上传时需要你设置input标签的multiple属性为true，这样在php里你可以接受文件数据如$_FILES['file_data']。
2、 额外数据：本插件能够想你的服务器发送额外的数据。这个能够通过设置uploadExtraData来完成。如一个键值对的关联数组对象一样。所以如果你有设置uploadExtraData={id:'kv-1'}，在php中你可以读取这个数据如$_POST['id']。
提示：在异步模式下，你一定会在你的服务器经由ajax上传收到单个文件。基本的，本插件会为每个被选择上传的文件触发平行ajax请求，你需要根据
这个写你的服务器上传逻辑，这样才能读取并且上传一个文件。相似的，在下面的发送数据章节，你必须仅为单个文件接收返回一个initialPreview来反射数据
·error：字符串，这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。举例来说，这个来自服务器的响应该像这样发送{error:
'You are not allowed to upload such a file.'}。提示：这个插件会自动的生效并且显示ajax异常错误。
·initialPreview数组，图像文件地址列表或者任何html标记来指出你的上传文件。你应该发送在这个数组中发送一行，因为你应该收到一个文件在异步上传模式。如果这个属性被设置了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreview
option setting。举个例子：
1. initialPreview:[
2. '<img src='/images/desert.jpg' class='file-preview-image'
alt='Desert' title='Desert'>',
3. ],
initialPreviewConfig：数组，这个配置来对每个文件标记在initialPreview里面确认属性。你应该发送一行在这个数组中，因为你应该会受到一个文件在异步上传中，如果这个属性被设定了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreviewConfig
option setting，举个例子
1. initialPreviewConfig:[
2. {
3. caption:'desert.jpg',
4. width:'120px',
5. url:'http://localhost/avatar/delete',// server deleteaction
6. key:100,
7. extra: {id:100}
8. }
9. ]
·initialPreviewThumbTags：数组，一个对象的数组，与替换标签相对应，这个初始化预览缩略图设置经由initialPreview将会读取这个配置来替换标签
1. // changethumbnail footer template
2. // set initialpreview template tags
3. initialPreviewThumbTags:[
4. {
5. '{CUSTOM_TAG_NEW}':' ',
6. '{CUSTOM_TAG_INIT}':'lt;spanclass=\'custom-css\'>CUSTOM MARKUPlt;/span>'
7. }
8. ];
9. ·append：布尔值，如果你在初始化的时候已经设置了一个initialPreview ，不滚你是否向initialPreview添加这个内容。如果没有设置这个，默认值是true，如果设置成false，本插件会复写initialPreview 的内容。
10.
11.
重要：你必须从你的服务器发送一个有效的的json响应，否则这个上传进度会失败，即使你没有遭遇任何错误。你至少要从你的服务器发送一个空的json对象如{}
为了捕获和显示一个有效的错误，你的json相应数据必须包含error键，而且他的value必须是错误html标记来显示，这个应该像正如上面提及的那样来设置
利用fileuploaded事件，你能处理额外的json发来的数据来实现进一步的功能。
收到数据（服务器端）
你的服务器必须与uploadUrl里设置的地址一样，从本插件收到下面的数据：
1. 文件数据：这个数据很像表单file input发送给服务器的。比如在php中，你可以读取这个数据以$_FILES['input-name']，其中input-name是你的input标签里面的name属性。在异步模式中也有这个。如果你不给你的input标签设置一个name属性，则name默认是file_data.你必须以数组的形式设置name属性，正如在本网站tip里提到的那样，而且要设置multiple属性为true。如果你没有以数组的格式设置你的name属性，你会在你的服务器上只收到一个文件。（正常情况下）在php里你会收到文件如$_FILES['input-name']，而且这将是一个文件对象数组。
2. 额外数据，本插件能够想你的服务器发送额外数据，通过设置uploadExtraData属性为一个键值对关联数组可以实现。所以如果你设置uploadExtraData={id:'kv-1'}，在php中你能读取这个数据如$_POST['id']；
发送数据（从服务器）
在异步模式下，服务器必须以json格式发送数据回来，你应该发送这5条信息：
·error：字符串，这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。
`errorkeys:字符串，这些键（为收到的文件提供0基索引）为出错的文件。基于这个数据，本插件会自动发送缩略图和每个独立的预览文件到出错文件集。
·initialPreview数组，图像文件地址列表或者任何html标记来指出你的上传文件，如果这个属性被设置了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreview
option setting。举个例子：
1. initialPreview: [
2. '<img src='/images/desert.jpg' class='file-preview-image'
alt='Desert' title='Desert'>',
3. '<img src='/images/jellyfish.jpg' class='file-preview-image'
alt='JellyFish' title='JellyFish'>',
4. ],
initialPreviewConfig：数组，这个配置来对每个文件标记在initialPreview里面确认属性。，如果这个属性被设定了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreviewConfig
option setting，举个例子
1. initialPreviewConfig:[
2. {
3. caption:'desert.jpg',
4. width:'120px',
5. url:'http://localhost/avatar/delete',// server deleteaction
6. key:100,
7. extra: {id:100}
8. },
9. {
10. caption:'jellyfish.jpg',
11. width:'120px',
12. url:'http://localhost/avatar/delete',// server deleteaction
13. key:101,
14. extra:function() {
15. return {id: $('#id').val()};
16. },
17. }
18. ]
19. ]
·append：布尔值，如果你在初始化的时候已经设置了一个initialPreview ，不滚你是否向initialPreview添加这个内容。如果没有设置这个，默认值是true，如果设置成false，本插件会复写initialPreview 的内容。
举例来说，从服务器发回的数据应该像这样{error:'You have faced errors in 4 files.', errorkeys: [0, 3, 4, 5]}。提示：本插件会自动的生效并且显示ajax异常错误。
重要：你必须从你的服务器发送一个有效的的json响应，否则这个上传进度会失败，即使你没有遭遇任何错误。你至少要从你的服务器发送一个空的json对象如{}
为了捕获和显示一个有效性错误，你的json恢复数据必须包含error键，而且它的值必须是html标记来显示。另外，你必须相似的为同步模式发送errorkeys来确认出错文件的键。这个可以向上面提到的一样设置。
你也可以发送额外的键或者数据在你的json回复中，你可以用filebatchuploadsuccess事件来实现进一步的功能
html端调用实例：
一定要注意本插件在ajax异步上传多个文件时是分批多次上传的，一次只上传一个文件，然后上传多次，所以在servlet里面判断第几个文件是没有作用的
但是ajax同步模式上传发来的是一个文件数组，可以拿到文件的索引
下面提供一种在servlet端接收文件并存储的代码最短小的写文件方式：
以下代码可以接受大于2m的文件，需要先导入两个jar包
1) commons-fileupload-1.2.2-bin.zip
: 点击打开链接
2) commons-io-2.3-bin.zip : 点击打开链接
注意里面用到的类如果可以选择应选择apache-common包里面的
参考文章：http://blog.csdn.net/hzc543806053/article/details/7524491
引言：
一个强化的HTML5 文件输入插件，适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览，并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap
CSS3样式。通过对很多种文件提供预览支持，比如图片，文本，html，视频，声音，flash和对象，它大大增强了文件输入的功能。另外，它还包含基于AJAX的上传，拖拽，移除文件的功能，可视化的上传进度条，和可选择的添加或删除文件预览功能。
提示：本插件致力于使用大量在添加jquery下的css3和html5功能，强调：你可能会发现css3或html5或它两个的混合在许多实现中被需要。
本插件最早受一篇博文和Jasny'sFile Input plugin启发。但是本插件现在已经添加的好多功能和强化，为开发者提供了一个成熟并且完整的文件管理工具和解决方案。
伴随着4.0.0版本的发布，本插件现在支持被多种现代化浏览器支持的，基于Ajax，利用html5 Formdata和XHR2协议的上传。而且她也拥有了对在服务器端基于AJAX的文件删除原生内置支持。因此它可以添加更加强大的功能，联机添加、移除文件。本插件也对大多数现代浏览器添加了拖拉，移除支持。它也已经为Ajax上传提供原生支持。万一，浏览器不支持FormData或XHR2，本插件会降级成一个普通表单。
功能
提示：本插件的最新版本：v4.2.7已经放出文件输入功能：
1. 本插件将会把一个简单的HTML file input转换称一个先进的文件选取控制器。对于没有jquery和javascript支持的浏览器会退回一个普通的HTML
file input。
2. File input由一下三个部分以及选项和范例组成，来控制显示
文件标题部分：来显示一个简短的被选文件的信息
文件活动按钮部分：用于浏览，移除，上传文件
文件预览部分：用来在客户端显示这个被选择的文件（支持图片，文本，flash和视频类文件）。其他类型的文件会被按照普通缩略图显示。
3. 本插件自动的转换一个具有 type = file的input成为一个先进的文件选择器
input如果你设置class = file。所有的input选项会被以html5 data
属性传递。
4. 能顾选择和预览多重文件，利用html5 file reader api来读取并且预览文件。万一许多文件被选择
，将会显示文件加载进度在预览区域。
5. 提供定义好的模板和css样式，并且可以按照你的需求来改变；
6. 1.5.0以上版本你可以配置本插件来显示一个图片、文件的初始化预览，并且伴随着初始标题（对记录上传情景更加有用）.参考initialPreview和initialCaption属性选项部分来配置本功能；
7. 可以选择显示或隐藏底下的任意一个功能：
标题部分
预览部分
上传按钮
移除按钮
8. 定制目标容器元素的地点来展示整个插件，标题容器，标题文本，预览容器，预览图片，和预览地位。
9. 对于文本预览，自动收缩文本到预览图的宽度，并且展示一个收缩的指示器链接来悬浮展示完整的文本，你可以定制这个收缩指示器。
10. 定制被选择的预览，进度和备选文件的提示信息
11. 上传动作默认是一个表单提交，支持基于自定义Ajax上传上传到远程服务器动作参数。
12. 为更进步的开发提供Jquery事件触发器。现在已经支持Filereset，fileclear,filecleared,
fileloaded, and fileerror.事件
13. 支持Disabled和只读文件
14. 超出容器的长文件名可以动态的自动改变文件标题大小。
15. 在图像完整的加载到预览区域之后，建立了新的fileimageuploaded事件
16. 当图片大小查处了预览区域的面积时自动改变预览图像的大小。
17. 为满足开发者的需求配置file-input提供完整的模板和扩展性。
18. 智能预览支持多种文件类型，内置的文件支持种类是：图像，文本，html，视频，音频，flash，对象，压缩文件和其他。
19. allowedPreviewTypes：你能够配置所有的被预览文件类型，默认是['image',
'html', 'text', 'video', 'audio', 'flash','object']。因此所有的文件类型默认被以object来预览。比如如果只预览
image和
video
，你把这个属性赋值：
['image', 'video'].。如果你想对所有文件类型去掉预览功能并且展示previewIcon而不是一个缩略图，设置这个属性为null，空，或者false。
20. allowedPreviewMimeTypes：在添加了allowedPreviewTypes属性后，你也能控制被预览的所有mime类型。这个属性默认是null，意味着支持所有的mime类型。提示：在2.5.0版本释放时候，你能通过设置
allowedFileTypes和
allowedFileExtensions控制被允许上传的文件类型。
21. layoutTemplates：可你让你用一个属性配置所有的布局模板设置。能够被配置的布局对象为：
main1,
main2,
preview,
caption,和
modal.
22. previewTemplates：对于每个预览类型，所有的预览模板 (
generic,
image,
text,
html,
video,
audio,
flash,
object,
and
other).已经被融合进一个属性，而不是分开的，比如为图像或者文本单独一个模板。对所有预览文件类型有默认的建立好的模板，利用直接的标记，一般的模板被仅用来展示initialPreview属性中规定内容。
23. previewSettings：允许你对每个预览图片配置宽度和高度，本插件有默认的宽度和高度，已经被提前定义好，比如图像，文本，html。。。
24. fileTypeSettings：能够让你利用一个回调函数配置并且识别每个预览的文件类型，本插件有默认的回调函数，已经被提前定义好去识别每种类型，比如图片，文本。。。
25. 增强了模板中的替代标签，利用本版本，它将会自动的对每个标签检查多重事件来替换一个模板字符串。
26. 在任意的事件中，操作事件并且轻松的添加你自己的习惯验证消息，利用返回值来终值上传。
27. 支持各种语言翻译和本地化操作。
提示：flash预览需要安装Shockwave flash插件并且被客户端浏览器支持。本flash预览目前这能被webkit浏览器成功的支持。视频或者音频格式被所有支持html5音视频标签的现代浏览器所支持。切记html5只能支持有限周磊的视频和音频标签，比如mp4,
webm, ogg, mp3, wav，并且视频文件的大小推荐越小越好（可以通过maxFileSize属性来控制）确保大小不会影响到预览的性能，你可以从examples目录复制一些文件（在这个插件里），来测试一些falsh或视频文件的案例。
文件上传功能
在4.0.0版本下，本插件也包含了内置的Ajax上传支持，还有可选的添加或删除文件功能。Ajax上传功能被建立在html5 formdata 和xmlhttprequest 2级之上。多数现代浏览器都支持这个标砖，但是万一浏览器不支持，本插件会自动的降级称普通表单。1. 添加利用html5 formdata基于ajax上传功能，如果浏览器不支持会降级成普通表单文件提交。
2. 为了使用ajax上传，必须在js中设置uploadUrl属性。
3. 增强了插件可以让文件被添加，粘附，移除（基于FEEDBACK ）。因此用户可以粘附文件到预览区域
4. 新的拖拽区域可以拖拉文件到预览区域并且被粘附上。
5. 删除或者上传文件一个一个的或者几个文件一起。
6. 如果showPreview属性被设置成false，或者uploadUrl不支持插件，会自动降级成普通表单格式。
7. 为等待上传中的文件设置了可配置的指示器，比如文件成功上传还有文件上传失败。
8. 基于ajax的上传可以添加额外的表单。
9. 上传进度条和每个文件独立的略缩图上传指示
10. 能共取消甚至终止正在进行的ajax上传。
11. 增进初始预览内容，你能够设置初始预览动作（为初始预览删除提供预建支持）。其他的自定动作按钮也能够被设置初始预览图
12. 尽管本插件上层功能最优的的利用了html5和jquery功能，但仍确保插件大小依靠并且最适性能。
13. 只要ajax上传结束，自动的根据来自服务器的内容尽快刷新预览内容。
安装
本插件能被自动或者手动安装利用这些选项中的一个BowerPackage Manager
经由Bower Package Manager安装非常容易$ bower install bootstrap-fileinput
ComposerPackage Manager
你可以安装bootstrap file-input 经由composerpackage manager.或者执行
$ php composer.phar requirekartik-v/bootstrap-fileinput "dev-master"
或者添加
"kartik-v/bootstrap-fileinput":"dev-master"
到你的composer.json文件
手动安装
你也能轻松的手动安装本插件到你的项目离去，仅仅下载这个源文件zip或者tar ball并且抽取插件内容（css和js目录）到你的项目中去。翻译
正如在安装章节展示的那英，翻译现在已经在4.1.8版本之后启用。你能够加载一个本地文件/fileinput_locale_<lang>.js在核心文件fileinput.min.js之后。<lang>就是语言的代码，比如de,fr.如果本地化文件不存在，你可以为新语言提交一个翻译。必须环境
1.Bootstrap 3.x.但是，本插件能适用自定义的任何css框架，利用模板。2.最新版本的jquery
3.最新版的浏览器，支持html5fileinput，还有filereader api 包含css3和jquery。
4.为了文件预览能正常工作，浏览器必须支持html5filereaderApi 否则本插件将会自动降级成一个普通file input。对ie浏览器，开发者必须适用ie10一张版本，ie9及以下版本将会降级成普通fileinput，而且也不会支持多文件选择或者html5 filereader API。
5. 4.0版本之后，ajax上传被支持，ajax上传需要浏览器支持html5formdata 和XHR2 (XMLHttpRequest 2)，多数浏览器支持这两个。如果浏览器不支持，本插件会自动降级成普通表单并且不支持ajax上传。
使用方法：
很大程度上来说，本插件能够被配置在下列两个不同的模式来上传注意：不要试着联合下面的两种模式来收取文件，因为你会收到不连续或者错误的结果。模式一表单提交：
在这种模式中，你不要设置uploadUrl属性。本插件会利用原生的 file input来储存文件并且它能够被独处在一个普通表单提交之后(你必须把这个input放在一个form里面)。这种模式对于单个文件上传非常有效，或者简单情景下的多文件上传。配置是直接的正如你能读出所有的被post从一个原生的表单提交的数据。但是，提示你这个原生file
input是制度的并且不能被外部的代码修改或者更新。尤其是对于多文件input选择，一个新文件不能添加到一个已经存在的文件选择列表里面。如果你常识去选择文件从一个已经选好的file input，它将会被重写并且清除之前的选项，简单的来说，在此模式下，在上传之前你不能有选择的移除或者删除已经被添加文件。
模式二 ajax提交：在这个模式下，你必须用一个有效的ajax处理服务器url设置uploadUrl属性。如果uploadUrl被设置好了，然后本插件会自动认为这是个ajax上传情景。本插件为ajax提交提供了许多先进的功能，而且这些功能在表单提交下是没有用的。功能像拖拽文件，在预览区域添加、移除文件，而且进度条功能只能在本模式下使用。
你的浏览器必须支持HTML5FormData/XHR2，而且你的服务器代码处理ajax请求必须返回一个有效的json回复。
提示，在一个先进的模式下，本插件允许你处理ajax上传即使没有文件被选择，但是一个有效的uploadExtraData会被发送伴随着ajax响应。这些事件
filebatchpreupload,
filebatchuploadsuccess,
filebatchuploadcomplete,或
filebatchuploaderror
在这种条件下会被触发。它将不会有任何数据从被选择文件里发出，但是会允许额外的数据被发送。
用法：
如果你添加一个cssclass文件在这个input上，本插件会自动的转换[inputtype="file"]成一个fileinputcontrol，但是如果你独立的初始化这个插件经由js，然后不要再添加css样式在这个input上（正如它将会调职重复的初始化并且这个js代码可能会被跳过）
1. 第一步：加载下面这些设置到header里去
2. <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"rel="stylesheet">
3. <linkhref="path/to/css/fileinput.min.css"media="all"rel="stylesheet"type="text/css"/>
4. <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
5. <!--canvas-to-blob.min.js is only needed if you wish to resize images beforeupload.
6. This must be loaded beforefileinput.min.js -->
7. <scriptsrc="path/to/js/plugins/canvas-to-blob.min.js"type="text/javascript"></script>
8. <scriptsrc="path/to/js/fileinput.min.js"type="text/javascript"></script>
9. <!--bootstrap.js below is only needed if you wish to use the feature of viewingdetails
10. of text file preview via modal dialog-->
11. <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"type="text/javascript"></script>
12. <!--optionally if you need translation for your language then include
13. locale file as mentioned below -->
14. <scriptsrc="path/to/js/fileinput_locale_<lang>.js"></script>
如果你注意到了，你需要额外的加载jquery.min.js和bootstrap.min.css，为了fileinput.min.css和fileinput.min.js。本地文件fileinput_locale_<lang>.js可以有选择的添加如果你需要翻译成你的语言的话。
提示：canvas-to-blob.min.js文件是JavaScript-Canvas-to-Blob
plugin by blueimp的源文件，它需要在fileinput.min.js之前被加载，如果你需要使用本插件的图像重新设置大小功能，为了轻松的接入， JavaScript-Canvas-to-Blob这个插件源码已经被包含在这个项目的js/plugins文件夹里。
第二步 a:在你的页面上初始化这个插件，如下
1. // initializewith defaults默认初始化
2.
3. $("#input-id").fileinput();
4.
5. // with pluginoptions带插件选项的初始化
6. $("#input-id").fileinput({'showUpload':false,'previewFileType':'any'});
#input-id是你页面上的input的id属性，比如（type=file，这个会被本插件自动的隐藏）。
第二步 b：可选择的，你能够直接的给任何一个input设置插件的选项，通过html5
data属性在你的input标签里
1. <inputid="input-id"type="file"class="file"data-preview-file-type="text">
Ajax上传
你需要设置服务器方法来解析并且返回正确的响应经由ajax，你能设置同步上传或者异步上传模式正如下面所描述的。异步上传：
这是默认的模式，通过把uploadAsync属性设置为true。当上传多个文件的时候，这个异步模式允许对每个文件触发平行的服务器请求。你能够控制文件上传数量的最大数在同事上传通过设定maxFileCount属性，在异步模式下，在预览框里的每个略缩图的进度条是有效的而且更新的。
收到数据（服务器端）
你的服务器方法应该如uploadUrl里设置的一样
从本插件收到下面的数据
1、 文件数据：这个被发向服务器的数据在一个非常普通的表单file input格式，比如在php中，你可以读取这个数据如：$_FILES['input-name']，input-name是你input标签的name属性。如果你不给你的input标签设置一个name属性，那么它默认是file_data。提示：多个文件上传时需要你设置input标签的multiple属性为true，这样在php里你可以接受文件数据如$_FILES['file_data']。
2、 额外数据：本插件能够想你的服务器发送额外的数据。这个能够通过设置uploadExtraData来完成。如一个键值对的关联数组对象一样。所以如果你有设置uploadExtraData={id:'kv-1'}，在php中你可以读取这个数据如$_POST['id']。
提示：在异步模式下，你一定会在你的服务器经由ajax上传收到单个文件。基本的，本插件会为每个被选择上传的文件触发平行ajax请求，你需要根据
这个写你的服务器上传逻辑，这样才能读取并且上传一个文件。相似的，在下面的发送数据章节，你必须仅为单个文件接收返回一个initialPreview来反射数据
发送数据（服务器端）
你的服务器地址应该如uploadUrl属性里设置的一样，而且必须发回一个json对象数据，在这个条件下，你能够发送这4条信息，标明在异步模式下，你将会受到一个文件记录来自服务器，所以根据这个调整你的代码·error：字符串，这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。举例来说，这个来自服务器的响应该像这样发送{error:
'You are not allowed to upload such a file.'}。提示：这个插件会自动的生效并且显示ajax异常错误。
·initialPreview数组，图像文件地址列表或者任何html标记来指出你的上传文件。你应该发送在这个数组中发送一行，因为你应该收到一个文件在异步上传模式。如果这个属性被设置了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreview
option setting。举个例子：
1. initialPreview:[
2. '<img src='/images/desert.jpg' class='file-preview-image'
alt='Desert' title='Desert'>',
3. ],
initialPreviewConfig：数组，这个配置来对每个文件标记在initialPreview里面确认属性。你应该发送一行在这个数组中，因为你应该会受到一个文件在异步上传中，如果这个属性被设定了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreviewConfig
option setting，举个例子
1. initialPreviewConfig:[
2. {
3. caption:'desert.jpg',
4. width:'120px',
5. url:'http://localhost/avatar/delete',// server deleteaction
6. key:100,
7. extra: {id:100}
8. }
9. ]
·initialPreviewThumbTags：数组，一个对象的数组，与替换标签相对应，这个初始化预览缩略图设置经由initialPreview将会读取这个配置来替换标签
1. // changethumbnail footer template
2. // set initialpreview template tags
3. initialPreviewThumbTags:[
4. {
5. '{CUSTOM_TAG_NEW}':' ',
6. '{CUSTOM_TAG_INIT}':'lt;spanclass=\'custom-css\'>CUSTOM MARKUPlt;/span>'
7. }
8. ];
9. ·append：布尔值，如果你在初始化的时候已经设置了一个initialPreview ，不滚你是否向initialPreview添加这个内容。如果没有设置这个，默认值是true，如果设置成false，本插件会复写initialPreview 的内容。
10.
11.
重要：你必须从你的服务器发送一个有效的的json响应，否则这个上传进度会失败，即使你没有遭遇任何错误。你至少要从你的服务器发送一个空的json对象如{}
为了捕获和显示一个有效的错误，你的json相应数据必须包含error键，而且他的value必须是错误html标记来显示，这个应该像正如上面提及的那样来设置
利用fileuploaded事件，你能处理额外的json发来的数据来实现进一步的功能。
同步上传
在这个模式下，uploadAsync属性应该被设置成false，这将会触发一组给服务器的上传请求，并且从客户端以一个数组的方式发送文件到服务器。甚至在这个模式下，你能够通过设置maxFileCount属性来控制文件一次能够被允许上传的最大数量。但是，在同步模式，进度条仅能按照一整个运行，每一个在预览区域的缩略图的进度条不会确切的有效和更新。但是，本插件提供给你了一个方法来对每个文件进行识别上传错误。收到数据（服务器端）
你的服务器必须与uploadUrl里设置的地址一样，从本插件收到下面的数据：
1. 文件数据：这个数据很像表单file input发送给服务器的。比如在php中，你可以读取这个数据以$_FILES['input-name']，其中input-name是你的input标签里面的name属性。在异步模式中也有这个。如果你不给你的input标签设置一个name属性，则name默认是file_data.你必须以数组的形式设置name属性，正如在本网站tip里提到的那样，而且要设置multiple属性为true。如果你没有以数组的格式设置你的name属性，你会在你的服务器上只收到一个文件。（正常情况下）在php里你会收到文件如$_FILES['input-name']，而且这将是一个文件对象数组。
2. 额外数据，本插件能够想你的服务器发送额外数据，通过设置uploadExtraData属性为一个键值对关联数组可以实现。所以如果你设置uploadExtraData={id:'kv-1'}，在php中你能读取这个数据如$_POST['id']；
发送数据（从服务器）
在异步模式下，服务器必须以json格式发送数据回来，你应该发送这5条信息：
·error：字符串，这个是为整个一批上传的错误信息而且将会帮助本插件去确认上传中的错误。
`errorkeys:字符串，这些键（为收到的文件提供0基索引）为出错的文件。基于这个数据，本插件会自动发送缩略图和每个独立的预览文件到出错文件集。
·initialPreview数组，图像文件地址列表或者任何html标记来指出你的上传文件，如果这个属性被设置了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreview
option setting。举个例子：
1. initialPreview: [
2. '<img src='/images/desert.jpg' class='file-preview-image'
alt='Desert' title='Desert'>',
3. '<img src='/images/jellyfish.jpg' class='file-preview-image'
alt='JellyFish' title='JellyFish'>',
4. ],
initialPreviewConfig：数组，这个配置来对每个文件标记在initialPreview里面确认属性。，如果这个属性被设定了，本插件在上传成功后会自动的动态替换在预览框里的文件。这个配置有点像 initialPreviewConfig
option setting，举个例子
1. initialPreviewConfig:[
2. {
3. caption:'desert.jpg',
4. width:'120px',
5. url:'http://localhost/avatar/delete',// server deleteaction
6. key:100,
7. extra: {id:100}
8. },
9. {
10. caption:'jellyfish.jpg',
11. width:'120px',
12. url:'http://localhost/avatar/delete',// server deleteaction
13. key:101,
14. extra:function() {
15. return {id: $('#id').val()};
16. },
17. }
18. ]
19. ]
·append：布尔值，如果你在初始化的时候已经设置了一个initialPreview ，不滚你是否向initialPreview添加这个内容。如果没有设置这个，默认值是true，如果设置成false，本插件会复写initialPreview 的内容。
举例来说，从服务器发回的数据应该像这样{error:'You have faced errors in 4 files.', errorkeys: [0, 3, 4, 5]}。提示：本插件会自动的生效并且显示ajax异常错误。
重要：你必须从你的服务器发送一个有效的的json响应，否则这个上传进度会失败，即使你没有遭遇任何错误。你至少要从你的服务器发送一个空的json对象如{}
为了捕获和显示一个有效性错误，你的json恢复数据必须包含error键，而且它的值必须是html标记来显示。另外，你必须相似的为同步模式发送errorkeys来确认出错文件的键。这个可以向上面提到的一样设置。
你也可以发送额外的键或者数据在你的json回复中，你可以用filebatchuploadsuccess事件来实现进一步的功能
html端调用实例：
<div class="form-group"> <label for="exampleInputEmail1">商品图片（最多可上传4张jpg格式的图片）</label> <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-max-file-count="4" name="haha" "> </div>然后在js里这么写
$("#file-1").fileinput({//这里的id是input标签的id
uploadUrl: 'servlet/UploadImgServlet', // you must set a valid URL here else you will get an error
allowedFileExtensions : ['jpg', 'png','gif'],//允许的文件类型
overwriteInitial: false,
maxFileSize: 1000,//文件的最大大小
maxFilesNum: 10,//最多文件数量
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});一定要注意本插件在ajax异步上传多个文件时是分批多次上传的，一次只上传一个文件，然后上传多次，所以在servlet里面判断第几个文件是没有作用的
但是ajax同步模式上传发来的是一个文件数组，可以拿到文件的索引
下面提供一种在servlet端接收文件并存储的代码最短小的写文件方式：
以下代码可以接受大于2m的文件，需要先导入两个jar包
1) commons-fileupload-1.2.2-bin.zip
: 点击打开链接
2) commons-io-2.3-bin.zip : 点击打开链接
注意里面用到的类如果可以选择应选择apache-common包里面的
package com.situ.servlet;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.DiskFileUpload;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
public class UploadImgServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获得磁盘文件条目工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//获取文件缓存文件夹的路径
String tempPath = request.getRealPath("/temp");
//如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
//设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
/**
* 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上，
* 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem 格式的
* 然后再将其真正写到 对应目录的硬盘上
*/
File tempFolder = new File(tempPath);
if(tempFolder.exists()==false){
tempFolder.mkdirs();
}
//设置缓存文件夹
factory.setRepository(new File(path));
//设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
factory.setSizeThreshold(1024*1024) ;
//高水平的API文件上传处理
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> list = null;
try {
list = (List<FileItem>)upload.parseRequest(request);
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
for(FileItem item : list)
{
//获取表单的属性名字
String name = item.getFieldName(); //这个name就是<input>标签中的name属性，是很重要与服务器通信的方式
System.out.println("传来的filedName是"+name);
//如果获取的 表单信息是普通的 文本 信息
if(item.isFormField())
{
System.out.println(item);
}
//对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些
else
{
/**
* 以下三步，主要获取 上传文件的名字
*/
//获取路径名
String value = item.getName() ;
//索引到最后一个反斜杠
int start = value.lastIndexOf("\\");
//截取 上传文件的 字符串名字，加1是 去掉反斜杠，
String filename = value.substring(start+1);
//将文件写入服务器，第二个参数是文件名（不要加扩展名），第三个参数是要写入的文件夹 ，一般在这里文件名用随机数生成比较好
writeFile(item, filename, "item_imgs");
}
}
PrintWriter out = response.getWriter();
out.print("{}");//返回空json字符串代表上传成功，同时在浏览器收到后会出现绿色的对勾，如果失败就传输一个"{error:'错误信息'}",这样的话进图条就走不到100%并且还会锁死
out.flush();
out.close();
}
/**
* 传入一个fileitem，并且按照给出的文件名前缀，文件名后缀（索引），文件存储相对目录来写入从互联网的到的文件
* @param fileItem 传来的文件对象
* @param firstName 文件名前缀
* @param parentFolder 相对存储目录，如："imgs" 根目录C:\apache-tomcat-7.0.61\webapps\项目名\+parentFolder\
* @return
* @throws IOException
*/
public boolean writeFile(FileItem fileItem,String firstName,String parentFolder) throws IOException{
//用原来的文件名做文件名，用项目目录的绝对地址/attachment作为目录地址
File file1 = new File(this.getServletContext().getRealPath(parentFolder+"/"),firstName+".jpg");//自动补后面扩展名为jpg
if(file1.getParentFile().exists()==false){
file1.getParentFile().mkdirs();
}
file1.createNewFile();
InputStream ins = fileItem.getInputStream();
OutputStream ous = new FileOutputStream(file1);
try{
byte[] buffer = new byte[1024];
System.out.println("开始写文件");
int len = 0;
while((len = ins.read(buffer)) > -1)
ous.write(buffer,0,len);
System.out.println("已保存的文件"+file1.getAbsolutePath());
}finally{
ous.close();
ins.close();
}
return true;
}
}参考文章：http://blog.csdn.net/hzc543806053/article/details/7524491
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET MVC Bootstrap极速开发框架
- bootstrap初接触
- 基于jquery，bootstrap数据验证插件bootstrapValidator 教程
- Bootstrap之Carousel不能自动播放的解决办法,支持左右滑动手势
- bootstrap modal 弹窗 数据清除
- bootstrap datetimepicker 插件语言选择
- Bootstrap例子——下拉菜单
- 为bootstrap的tab增加请求操作
- Bootstrap JQuery wizard steps流程插件
- bootstrap编码规范
- bootstrap collaspe
- bootstrap table使用小记
- Bootstrap Table的例子(转载)
- 免费的Bootstrap管理后台模板集合
- 对bootstrap中confirm alert进行封装
- Bootstrap例子1——Hello world
- 如何封装form表单中富文本编辑器bootstrap wysiwyg到jfinal传递参数
- 50 Must-have plugins for extending Twitter Bootstrap
- Bootstrap学习笔记-栅格系统
- Bootstrap学习笔记-响应式布局原理