boostrap-fileinput上传插件
来源:互联网 发布:js 访问json第n个 编辑:程序博客网 时间:2024/05/17 01:08
信息来源于网上,方便以后有机会使用。
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 tagsinitialPreviewThumbTags:[ { '{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 tagsinitialPreviewThumbTags:[ { '{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(转)
- boostrap-fileinput上传插件
- 扒一扒使用boostrap-fileinput上传插件遇到的坑,Bootstrap-fileinput上传插件的使用详解,
- bootstrap fileinput 上传插件
- Angular+Boostrap-fileinput+formdata上传图片(前端代码)
- BootStrap FileInput 插件上传使用
- bootstrap-fileinput上传插件试用
- 使用插件Bootstrap Fileinput文件上传
- yii2 之图片上传插件fileinput使用说明
- bootstrap上传插件fileinput自动上传&成功回调
- bootstrap上传插件fileinput自动上传&成功回调
- bootstrap3 文件上传插件fileinput中文说明文档
- Bootstrap-fileinput插件使用教程 支持多文件上传
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
- yii2组件之多图上传插件FileInput的详细使用
- Bootstrap的fileinput插件实现多文件上传的方法
- Node项目之bootstrap-fileinput- 上传插件使用
- 文件上传预览插件 Bootstrap-fileinput组件封装及使用
- BootStrap FileInput 插件实现多文件上传前端功能
- Android源码目录结构详解
- [BZOJ4554][TJOI2016&HEOI2016]游戏(二分图匹配)
- 【设计模式】外观模式
- HDU
- 拷贝构造函数
- boostrap-fileinput上传插件
- GBDT的正则化及与XGBOOST区别
- [bzoj 1079--SCOI2008]着色方案
- 系统延时,定时服务
- 数据库视频总结(三)
- 近年来的科幻中我看到了
- SSM 封装base(二) -封装分页
- python之split()使用方法
- 浏览器是怎样工作的:渲染引擎,HTML解析