JS上传插件bootstrap-fileinput的使用及自定义

分类:开发相关    发布时间:2018-12-26 16:06:19
本插件对多种类型的文件提供文件预览,并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式。通过对很多种文件提供预览支持,比如图片,文本,html,视频,声音,flash和对象,它大大增强了文件输入的功能。另外,它还包含基于AJAX的上传,拖拽,移除文件的功能,可视化的上传进度条,和可选择的添加或删除文件预览功能。


源码以及API地址:
bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API:http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo


使用:

前端html

引用文件
<link href="/statics/css/bootstrap.min.css" rel="stylesheet">
<script src="/statics/plugins/bootstrap-fileinput/js/fileinput.js"></script> <!--主功能js-->
<script src="/statics/plugins/bootstrap-fileinput/js/plugins/canvas-to-blob.js"></script>  <!--支持托拽-->
<script src="/statics/plugins/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>   <!--支持中文-->


<input id="file_upload" name="filename" type="file" multiple class="file-loading"> <!--文件上传区域功能实现-->

<div id="info-msgs" class="col-md-12" style="margin-top: 2%;color: limegreen"></div>  <!--显示上传信息--> 



js部分
$(document).ready(function(){
    upload_files = []; //用来临时存放上传的文件
    $("#file_upload").fileinput({ //上传文件
        uploadUrl:"{% url 'file_upload' %}",  //上传文件的路径
        uploadAsync:true, //使用异步传输
        language:'zh', //中文支持
        maxFileSize:10000, //最大10M
        maxFileCount:5, //最多一次上传5个文件
        showPreview:false,  //关闭预览框
        showCaption:true,  //是否显示文件标题
        allowedFileExtensions: ['xls', 'xlsx']  //上传文件格式限制

    });


    $('#file_upload').on('filelock',function () {  //点击“上传文件”按钮,文件上传过程中解发事件
        var row_html = "上传进行中,请稍等";
        $("#info-msgs").append(row_html)
    });


    $("#file_upload").on('fileuploaded',function(event,data,previewId,index){  //文件上传完成后触发事件
            var from = data.form,files = data.files,extra = data.extra,
            response = data.response,reader = data.reader;
            console.log(response) ; //打印后端返回的内容
            upload_files.push(response); 
        if(response=="completed") {  //根据后端返回的内容判断成功还是失败
            alert("上传成功");
            location.reload();
        }else{
            alert("上传失败,请联系网站管理员!");
            location.reload()
        }

  });

});

如果要修改上传按钮的名称,使用中文插件的话,请修改fileinput_locale_zh.js这个文件中的相关内容



后端略。。。。



功能演示

1、开始上传



2、 上传中


3、上传完成




该插件说明文档路径
bootstrap-fileinput/README.md


本文中用到的部分功能说明及代码示例
#### fileuploaded
This event is triggered after upload is completed for each thumbnail file. Note this event is also triggered for 
asynchronous batch uploads after each file in the selection is uploaded via ajax. Additional parameters available are: 

- `data`: This is a data object (associative array) that sends the following information, whose keys are:
    - `form`: the FormData object which is passed via XHR2 (or empty object if not available).
    - `files`: the file stack array (or empty object if not available).
    - `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
    - `response`: the data sent via ajax response (or empty object if not available).
    - `reader`: the FileReader instance if available
    - `jqXHR`: the `jQuery XMLHttpRequest` object used for this transaction (if available).
- `previewId`: the identifier of each file's parent thumbnail div element in the preview window.
- `index`: the zero-based index of the file in the file stack.

```js
$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra, 
        response = data.response, reader = data.reader;
    console.log('File uploaded triggered');
});
```



#### filelock
This event is triggered when the upload process is launched by clicking a upload button, and the entire widget is locked (disabled) until upload is getting processed. Only the `Cancel` button will be enabled when the file input is locked. Additional parameters available are: 

- `filestack`: the array of selected file objects.
- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).

```js
$('#input-id').on('filelock', function(event, filestack, extraData) {
    var fstack = filestack.filter(function(n){ return n != undefined });
    console.log('Files selected - ' + fstack.length);
});
```


标签: jQuery bootstrap

阅读(735)┆ 评论(0) ┆ (0) ┆ 返回博客首页


发表我的评论

欢迎您: | 退出登录


文章评论