fileinput.js 实现文件上传功能

About-简介

官方文档

file input插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能;

wuhuacong博客

Features-特性

fileinput 可以显示相关文件属性
可以进行上传文件按钮控制
提供预览功能
多文件选择
文件夹选择
H5文件内容预览
ajax上传
H5拖拽选择

Usage-应用

fileinput 可以支持两种方式上传: Form Submission表单提交,Ajax SubmissionAjax传输

表单提交

表单提交,不需要 `uploadUrl` 属性,通过本地文件输入,然后表单格式封装数据;
优势: 配置简单明了,服务端通过读取 POSTED 数据获取文件;
缺点: 本地文件为只读,不可以通过代码进行修改和更新;比如:用户需要在已选择文件列表中,追加一个文件,就只能覆盖之前,重新选择;

Ajax提交

Ajax提交,必须提供 `uploadUrl` 属性,另外,如果设置了`uploadUrl` 属性,就认为是通过ajax方式上传;
优势: 提供更丰富的功能,比如拖拽上传,追加\删除文件

Usage-使用

Step 1

加载相关资源

<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
<!-- optionally uncomment line below if using a theme or icon set like font awesome (note that default icons used are glyphicons and `fa` theme can override it) -->
<!-- link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css media="all" rel="stylesheet" type="text/css" /-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- piexif.min.js is only needed for restoring exif data in resized images and when you 
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
    This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
    HTML files. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
   3.3.x versions without popper.min.js. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
<!-- optionally uncomment line below for loading your theme assets for a theme like Font Awesome (`fa`) -->
<!-- script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/themes/fa/theme.min.js"></script -->
<!-- optionally if you need translation for your language then include  locale file as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script>

Step 2a

初始化插件

// initialize with defaults
$("#input-id").fileinput();
 
// with plugin options
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

Step 2b

也可以通过H5的data属性,直接初始化: 设置CSS class=”file” 即可
需要注意的是: 如果通过js初始化,则不能再添加file class类到CSS

1	<input id="input-id" type="file" class="file" data-preview-file-type="text">

Ajax 的同步异步上传

Asynchronous-异步模式

异步模式为fileinput的默认模式,即 uploadAsync 属性为 true;
在异步模式下,上传多文件时,可以并行的请求服务器处理,最大并行数可以通过 maxFileCount 属性设置;

服务端接收数据:
file data: $_FILES[‘input-name’] 或者 $_FILES[‘file_data’]
extra data: 通过 uploadExtraData 属性传递额外数据,如:uploadExtraData={id:’kv-1’},则服务端可收到数据$_POST[‘id’]

服务端发送数据:
服务端必须返回json对象数据,
error: string 显示错误信息,如:{error: ‘You are not allowed to upload such a file.’}
initialPreview: array 标记上传文件,在异步模式下,只能返回一行,因为一次只收到一个文件,如:

1
2
3

initialPreview: [
      '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',
  ],

initialPreviewConfig: array 对 initialPreview 文件中特定属性,如:

  initialPreviewConfig: [
    {
        caption: 'desert.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // server delete action 
        key: 100, 
        extra: {id: 100}
    }
]

initialPreviewThumbTags: array, 对预览标签内容进行修改,如:

  // change thumbnail footer template
// set initial preview template tags
initialPreviewThumbTags:[
    {
        '{CUSTOM_TAG_NEW}': ' ',
        '{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP</span>'
    }
];

append: boolean 表明是否追加内容到 initialPreview ,如果设置为false,则覆盖前面的initialPreview

Synchronous-同步模式

同步模式下 uploadAsync 属性为 false;在这个模式下,所有文件会作为一个对象数组发送给服务端
同样,也可以通过设置 maxFileCount 控制,一次最多发送文件数量

服务端发送数据:
服务端必须返回json对象数据,
error: string 显示错误信息,如:{error: ‘You are not allowed to upload such a file.’}
errorkeys: array 表明出错问题的key值
initialPreview: array 标记上传文件,如:

initialPreview: [
    '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',
    '<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>',
],