bootstrap-fileinput图片上传

bootstrap-fileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果，可同时选择多个文件。该插件使用bootstrap CSS3样式来制作文件上传界面，美观大方。并且它提供了多国语言，你可以选择使用中文。

该文件上传插件比普通的文件上传插件功能更强大，它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图。另外，它还可以基于AJAX上传文件，拖拽上传文件，查看上传进度，可以选择性的预览，添加或删除文件。

配置参数

• 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属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。

  下面的CSS样式用于显示各种不同类型的文件预览图：

  • image files：CSS样式为file-preview-image
  • text files：CSS样式为file-preview-text
  • other files：CSS样式为file-preview-other

下面的例子是初始化预览图以及上传图片以及删除图片：

$('#file_1').fileinput({
uploadUrl: '${ctx}/home/mall/upload',  
       allowedFileExtensions : ['jpg', 'png','gif'],
       overwriteInitial: false,
      initialPreview: [
<c:forEach items="${planList}" var="attachMent">   
           "<img src='${attachMent.filePath}/${attachMent.fileName}' class='file-preview-image' >",
          </c:forEach>
],
initialPreviewConfig: [
   <c:forEach items="${planList}" var="attachMent">   
            {
                     caption: '${attachMent.fileName}', 
                    width: '120px', 
                    url: "${ctx}/home/mall/deleteImage?id="+'${attachMent.id}'+"&caption="+'${attachMent.fileName}', 
                    key: '${attachMent.id}', 
                    initialPreviewShowDelete:true,
                    extra: {id: '${attachMent.id}'}
               },
            </c:forEach>
             ] 
         }).on("fileuploaded", function(event, data, previewId, index) {
var json =data.response;
if(json.result == "T"){
var inputValue=$("#planIds").val();
var append="";
if(inputValue!=""){
append=inputValue+","+json.id;
}else{
append=json.id;
}

$("#planIds").val(append);
 
}else{
alert("失败");
}
 
});