Bootstrap文件上传插件(jQuery-File-Upload)

推荐一款基于Bootstrap的文件上传插件jQuery-File-Upload，该插件主要特点是：支持多文件选择上传、支持客户端处理上传进度，另外还支持跨域，块和可恢复的文件上传、客户端图像大小调整等。可惜的是官方给的文档不是很详细，有些高级功能目前我也不知道，只能就把我所知道的基本用法介绍下，这在一般的应用中已经足够了。

基本使用也可参考如下文档：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

官网地址：https://github.com/blueimp/jQuery-File-Upload

下载地址：https://github.com/blueimp/jQuery-File-Upload/archive/master.zip

包含的文件：

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/jQuery-File-Upload/css/jquery.fileupload-ui.css">
<script src="http://www.see-source.com/js/jquery-1.8.1.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>

单文件自动上传(带进度条)

Html代码

<div class="container">
    <span class="btn btn-success fileinput-button">
        <i class="icon-plus icon-white"></i>
        <span>选择上传文件</span>
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
    <br>
    <br>
    <!-- 进度条 -->
    <div id="progress" class="progress progress-success progress-striped">
        <div class="bar"></div>
    </div>
    <!-- 已经上传的文件列表 -->
    <div id="files"></div>    
</div>

Js代码

$(function () {
	//文件上传地址
    var url = 'http://localhost:8080/myfileupload/upload';
    //初始化，主要是设置上传参数，以及事件处理方法(回调函数)
    $('#fileupload').fileupload({
        autoUpload: true,//是否自动上传
        url: url,//上传地址
        dataType: 'json',
        done: function (e, data) {//设置文件上传完毕事件的回调函数
            $.each(data.result.files, function (index, file) {//
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {//设置上传进度事件的回调函数
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });
});

使用很简单，只需要利用$(选择器).fileupload({})进行设置即可(其中的"选择器"指向某个文件标签)。如设置上传的地址(url)、返回数据类型(dataType)、是否自动上传(autoUpload), 另外就是设置事件的回调函数，如：done事件，当文件上传完毕后会被触发，progressall事件，该事件主要用于生成进度条。另外说下参数autoUpload，即是否自动上传，如果设置为true，那么当选择上传文件后会立即将文件上传到服务器。

多文件选择上传

当用户选择某一文件时，不会立即上传，而是生成个待上传的列表，可以有选择的上传某一文件。效果图：

包含文件

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/jQuery-File-Upload/css/jquery.fileupload-ui.css">
<script src="http://www.see-source.com/js/jquery-1.8.1.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="http://www.see-source.com/js/jquery.tmpl.min.js"></script>

该例中用到了模板，需要引入jquery.tmpl.min.js库。

Html代码

<div class="container">    
    <span class="btn btn-success fileinput-button">
        <i class="icon-plus icon-white"></i>
        <span>Select files...</span>
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
    <br>
    <br>
    <table role="presentation" class="table table-striped">
      <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery">
      </tbody>
    </table>
</div>

Js代码

$(function () {
	//列表项模板
    var template = '<tr class="template-upload fade in">'+
        '<td>'+
            '<span class="preview"><canvas width="46" height="80"></canvas></span>'+
        '</td>'+
        '<td>'+
           ' <p class="name">${fileName_}</p>  '+          
        '</td>'+
        '<td>'+
        '    <p class="size">${fileSize_} KB</p>'+
        '    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>'+
        '</td>'+
        '<td>'+
        '    <button class="btn btn-primary start">'+
        '       <i class="icon-upload icon-white"></i>'+
        '       <span>Start</span>'+
        '    </button>'+
        '    <button class="btn btn-warning cancel">'+
        '       <i class="icon-ban-circle icon-white"></i>'+
        '       <span>Cancel</span>'+
        '    </button>        '+    
        '</td>'+
    '</tr>';
    var url = 'http://localhost:8080/myfileupload/upload';
    var currentData = {};
    $('#fileupload').fileupload({autoUpload: true,
        url: url,
        dataType: 'json',
        add: function (e, data) {
    	   var templateImpl = $.tmpl(template,{"fileName_":data.files[0].name,"fileSize_":(data.files[0].size/1000).toFixed(2)}).appendTo( ".files" );
    	   data.content = templateImpl;
    	   $(".start", templateImpl).click(function () {
    		    currentData.bar = templateImpl;    		    
                $('<p/>').text('Uploading...').addClass("uploading").replaceAll($(this));
                data.submit();//上传文件
           });
    	   $(".cancel", templateImpl).click(function () {
                $('<p/>').text('cancel...').replaceAll($(this));
                data.abort();//取消上传
                $(templateImpl).remove();
    	   });
        },

        done: function (e, data) {
        	$(".uploading", data.content).text('上传成功');
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.bar', currentData.bar).css(
                'width',
                progress + '%'
            );
        }
    });
});

注：为了避免模板标记${}与页面冲突，建立将上面的js代码放到单独的js文件。

相比于第1个demo，多了个add事件，该事件负责上传文件，通过data.submit()方法。我们对add事件进行了重写，增加了俩个按钮：start按钮、cancel按钮。如上图。当add事件被触发时并不立即调用data.submit()方法上传文件，而是绑定到start按钮上，点击start按钮才会上传。cancel按钮可通过调用data.abort()方法取消当前文件的上传。

+友情链接