fileupload 使用

转载：https://blog.csdn.net/fanxiangru999/article/details/63756730

官网实例：http://plugins.krajee.com/file-input-ajax-demo/1

1、需要引入的css及js：

注意jquery引入的顺序

2、我是单独做的实例，所以除了上面截图的内容，任何都系都没有引入，导致demo页中很多按钮图标没有显示，这是因为需要引入下面几个bootstrap的图标文件（fonts文件夹内）：

需要引入上述的原因是源码中这样写滴，所以单独加这几个文件时，注意相对位置：

3、完成上述两步，加上如下代码，即可实现上传前台工作：

[javascript]  view plain  copy

1. <input id="input-711" name="kartik-input-711[]" type="file" multiple class="file-loading">  
2. <script>  
3. $("#input-711").fileinput({  
4.     uploadUrl: "http://localhost/file-upload-single/1", // server upload action  
5.     uploadAsync: true,  
6.     maxFileCount: 5,  
7.     showBrowse: false,  
8.     browseOnZoneClick: true  
9. });  
10. </script>  

没错，上面的代码是直接从官网拷贝出来的，效果就可以直接展示出来了，但选择文件后预览时发现乱码，如下图：

网上查了很久，发现fileupload是用的html5的filereader，再查资料发现filereader是通过readAsText 方法设置编码集的！

果断搜了下fileupload源码，在fileupload.mini.js 中找到 l.readAsText(D,r.textEncoding):x...textEncoding:"UTF-8",...，将UTF-8 改为GBK 乱码就解决了~（记得清网页缓存+redeploy重新部署项目）

正文结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~希望对你有帮助！感谢支持！

下面介绍几个有用的方法：

1、如果页面中某个值或者内容改变需要调整上传路径，可以借鉴下面：

[javascript]  view plain  copy

1. $("#fileId").fileinput(    
2.                 "refresh",    
3.                 {    
4.                     uploadUrl : basePath    
5.                             + 'ptcms/lkpd/ptcdImport/uploadFlatness/SFC/' + screening    
6.                 });   

2、上传成功后回调函数：

[javascript]  view plain  copy

1. $(document).on('fileuploaded', function(event, data, previewId, index) {    
2.            
3.     });    

以下内容为：2017-07-14添加：

1、选择文件后直接上传：常规使用插件的业务效果是：选择文件-加载文件-点击上传按钮，稍加设置就可以省略用户操作的步骤：用户只需选择文件，系统自动完成加载及上传操作：

1）隐藏上传、删除、选择文件按钮：

[javascript]  view plain  copy

1. showClose : false,//显示右上角X关闭  
2. showRemove : false,//显示移除按钮,跟随文本框的那个  
3. showUpload : false,//是否显示上传后的按钮  
4. showBrowse : false,//是否显示上传前的上传按钮  

2）设置选择文件后立即上传：

[javascript]  view plain  copy

1. //选择文件后立即执行（fileselect：单个文件，filebatchselected：多个文件）  
2. $('#fileId').on('filebatchselected', function(event, files) {  
3.   $('#fileId').fileinput('upload');//上传操作  
4. });  

3）删除操作：

[javascript]  view plain  copy

1. $('#fileId').on('filesuccessremove', function(event, id) {//点击删除后立即执行  
2.   $('#fileId').fileinput('refresh');//文件框刷新操作  
3. });  

 2、之前遇到的问题：当图片或者文件上传成功以后（是上传成功，不是加载成功哦），再点击预览时显示空白：版本问题！一定不要用旧的版本！最新版GIT： https://github.com/kartik-v/bootstrap-fileinput

后附：某位网友整理的初始化的参数：（更详细的API见：http://blog.csdn.net/u012526194/article/details/69937741）

• showCaption：是否显示文件的标题。默认值true。
• showPreview：是否显示文件的预览图。默认值true。
• showRemove：是否显示删除/清空按钮。默认值true。
• showUpload：是否显示文件上传按钮。默认是submit按钮，除非指定了uploadUrl属性。默认值true。
• showCancel：是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。
• captionClass：在标题容器上额外的class。类型string。 
• previewClass：在预览区域容器上的额外的class。类型string。
• mainClass：添加在文件上传主容器。类型string。
• initialDelimiter：在initialPreview属性中用于上传多个文件时的分隔符。默认值：'*$$*'。
• initialPreview：类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串，会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。
allowedPreviewTypes : [ 'image' ],
allowedFileExtensions : [ 'jpg', 'png', 'gif' ], 
maxFileSize : 2000,

后台代码在下面链接里~ 
SpringMVC+bootstrap fileUpload 多文件上传 ：http://blog.csdn.net/fanxiangru999/article/details/61927385