信息来源于网上,方便以后有机会使用。
1.一些必要文件的引入
<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" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script>
2.必要的javascript代码
// 初始化
$("#input-id").fileinput();
// 插件选项
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
3.html代码
<input id="input-id" type="file" class="file" data-preview-file-type="text">
4.Ajax上传–两种上传方式(异步上传和同步上传)
您需要设置服务器方法来解析并通过AJAX返回正确的响应。您可以使用异步或同步模式设置上传
异步上传(默认模式)
将 uploadAsync属性设置为true
设置maxFileCount属性来控制一次允许上传的最大文件数量
接收数据(on server)
1.文件数据:在PHP中,您可以读取这些数据$_FILES['input-name'],input-name是input的name属性。如果您没有为您的输入设置名称属性,则名称默认为file_data,接收则用$_FILES['file_data']。
(注意,多个文件上传,则要求将multiple设置为true)
2.额外的数据:通过设置uploadExtraData键值对中的关联数组对象来完成。如果你有设置uploadExtraData={id:'kv-1'},在PHP中你可以读取这些数据$_POST['id']。
发送数据(from server)
uploadUrl必须以json编码的对象的形式发回数据,在这种情况下,您可以发送这4个信息:
- error
-字符串,这将是整个批量上传的错误消息,并将帮助插件识别文件上传中的错误,来自服务器的响应将被发送为{error: 'You are not allowed to upload such a file.'}
。插件会自动验证并显示ajax异常错误 - initialPreview
-数组,图像文件列表或任何HTML标记指向您上传的文件您将始终在此阵列中发送一行 - 因为您将始终收到一个文件,并以异步模式进行上载。如果设置了该属性,则上传成功后插件会自动替换预览内容中的文件
initialPreview: [
'<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',
],
- initialPreviewConfig
-数组,用于标识initialPreview项目中每个文件标记属性的配置(设置为项目的一部分initialPreview)。您将始终在此阵列中发送一行 - 因为您将始终收到一个文件,并以异步模式进行上载。如果设置了该属性,则上传成功后插件会自动替换预览内容中的文件
initialPreviewConfig: [
{
caption: 'desert.jpg',
width: '120px',
url: 'http://localhost/avatar/delete', // server delete action
key: 100,
extra: {id: 100}
}
]
- initialPreviewThumbTags
-数组,对应于替换每个初始预览缩略图内的标签的对象数组。通过设置的初始预览缩略图initialPreview将读取此配置以替换标签
// change thumbnail footer template
// set initial preview template tags
initialPreviewThumbTags:[
{
'{CUSTOM_TAG_NEW}': ' ',
'{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP</span>'
}
];
append
-布尔值,如果已经在INIT上设置了initialPreview,是否将内容附加到initialPreview。如果没有设置这个默认值true。如果设置为false,该插件将覆盖initialPreview的内容重要:1.您必须从服务器发送有效的JSON响应,否则上传过程将失败。即使您没有遇到任何错误,您也必须至少{}从您的服务器发送一个空的JSON对象。
2.要捕获并显示验证错误,您的JSON响应数据必须包含error密钥,其值将是要显示的错误HTML标记。这将如上所述设置。
3.您还可以使用JSON响应发送其他密钥或数据,以便使用类似事件处理高级案例fileuploaded
同步上传
uploadAsync
属性设置为false
这将只触发一个批量上传到服务器的调用,并将数据从客户端发送到服务器作为数组对象。
您也可以通过设置maxFileCount
属性来控制一次允许上载的最大文件数量。在同步模式下,进展只能在整体水平上进行
接收数据(on server)
设置uploadUrl
- file data
-例如在PHP中,您可以读取这些数据\$_FILES['input-name']
其中input-name
是输入的name
属性。如果您没有为您的输入设置名称属性,名称默认为file_data
。除了将multiple
属性设置为true
。如果您不将输入名称设置为数组格式,则只会收到服务器上的第一个文件。在PHP中,您将收到文件数据\$_FILES['input-name']
,它将是一个文件对象数组
<form enctype="multipart/form-data" action="file-upload.php" method="POST">
<input name="uploadFile[]" type="file" class="file" multiple="multiple">
</form>
- extra data
-插件可以发送额外的数据到你的服务器方法。这可以通过设置uploadExtraData
键值对中的关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}
,在PHP中你可以读取这些数据\$_POST['id']
。
发送数据
在同步模式下,uploadUrl
必须将数据作为json编码对象发回。在这种情况下,你发送这5条信息:
- error
-字符串,这将是整个批量上传的错误消息,并将帮助插件识别文件上传中的错误 - errorkeys
-数组,对于已经出错的文件的密钥(接收到的文件数据的从零开始的索引)。根据这些数据,插件会自动设置缩略图和每个单独的预览文件出错 - initialPreview
-数组,图像文件列表或任何HTML标记指向您上传的文件。如果设置了该属性,则上传成功后插件会自动替换预览内容中的文件。这个配置与{$ link1}类似。
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'>',
]
- initialPreviewConfig
-数组,用于标识initialPreview项目中每个文件标记属性的配置(设置为项目的一部分initialPreview)。如果设置了该属性,则上传成功后插件会自动替换预览内容中的文件。
initialPreviewConfig: [
{
caption: 'desert.jpg',
width: '120px',
url: 'http://localhost/avatar/delete', // server delete action
key: 100,
extra: {id: 100}
},
{
caption: 'jellyfish.jpg',
width: '120px',
url: 'http://localhost/avatar/delete', // server delete action
key: 101,
extra: function() {
return {id: $('#id').val()};
},
}
]
- initialPreviewThumbTags
-数组,对应于替换每个初始预览缩略图内的标签的对象数组。通过设置的初始预览缩略图initialPreview将读取此配置以替换标签
// change thumbnail footer template
// set initial preview template tags
initialPreviewThumbTags:[
{
'{CUSTOM_TAG_NEW}': ' ',
'{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP 1</span>'
},
{
'{CUSTOM_TAG_NEW}': ' ',
'{CUSTOM_TAG_INIT}': '<span class=\'custom-css\'>CUSTOM MARKUP 2</span>'
}
];
- append
-布尔值,如果已经在INIT上设置了initialPreview,是否将内容附加到initialPreview。如果没有设置这个默认值true。如果设置为false,该插件将覆盖initialPreview的内容。
初始化设置
$("#uploadfile").fileinput({
language: 'zh', //设置语言
uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //默认异步上传
showUpload:true, //是否显示上传按钮
showRemove :true, //显示移除按钮
showPreview :true, //是否显示预览
showCaption:false,//是否显示标题
browseClass:"btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize:0,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount:10, //表示允许同时上传的最大文件个数
enctype:'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
}).on("fileuploaded", function (event, data, previewId, index){
});
options(转)
属性名 | 属性类型 | 描述说明 | 默认值 |
---|---|---|---|
language | String | 多语言设置,使用时需提前引入\locales文件夹下对应的语言文件,中文zh,引入语言文件必须放在fileinput.js之后 | ‘en’ |
showCaption | Boolean | 是否显示被选文件的简介 | true |
showBrowse | Boolean | 是否显示浏览按钮 | true |