基础组件安装


仅应用基础组件(最小安装指南)


本插件的下载安装包中已带有一个基于 Bootstrap UI 的完整用户界面。

不过如果你仅仅想把插件集成到你现有项目自身的用户界面中,那你可以只加载插件的基础组件并进行最小安装。

以下便是一个最基础的 index.html 方案,其仅需要最低要求的组件以及只注册了一个简单 done 回调函数(有关如何使用不同的配置项和回调函数,请参阅 API 指南配置项手册):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script><script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p></p>').text(file.name).appendTo(document.body);
            });
        }
    });
});</script>
</body> 
</html>
响应和数据类型

上面的示例将 dataType 配置项设为 json,表示其需要服务端为每个上传的文件返回一个 JSON 格式的响应。当然上述 dataType 也可以改为其他 HTML 格式类型(HTML Content-Type)作为响应,这样你的 done 回调便会收到一个对应格式的响应数据。

通过基础组件显示上传进度


FileUpload 插件同时为单文件进度和多文件整体进度提供了进度数据采集事件,触发 progress 事件可采集单个文件的上传进度,而触发 progressall 事件则是采集多文件上传的整体进度信息。事件处理程序可以通过本插件的事件绑定机制(参阅 API 指南)或配置项(参阅配置项手册)来进行设置:

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

上面这段代码假设页面上的 $('#progress .bar') 元素为进度节点,事件回调函数中通过修改节点 width 属性来显示上传进度的百分比,节点元素如下:

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

另外节点元素应该与其节点容器拥有不同的背景色,并且还应通过 CSS 给节点设置一个 height 属性:

.bar {
    height: 18px;
    background: green;
}

通过基础组件显示单文件上传进度条


依赖以下脚本:

HTML:

<input
  id="fileupload"
  type="file"
  name="files[]"
  data-url="//jquery-file-upload.appspot.com/"
  multiple>

CSS:

.file {
   position: relative;
   background: linear-gradient(to right, lightblue 50%, transparent 50%);
   background-size: 200% 100%;
   background-position: right bottom;
   transition:all 1s ease;
}
 .file.done {
   background: lightgreen;
}
 .file a {
   display: block;
   position: relative;
   padding: 5px;
   color: black;
}

JS:

$("#fileupload").fileupload({
  dataType: "json",
  add: function(e, data) {
    data.context = $('<p class="file"></p>')
      .append($('<a target="_blank"></a>').text(data.files[0].name))
      .appendTo(document.body);
    data.submit();
  },
  progress: function(e, data) {
    var progress = parseInt((data.loaded / data.total) * 100, 10);
    data.context.css("background-position-x", 100 - progress + "%");
  },
  done: function(e, data) {
    data.context
      .addClass("done")
      .find("a")
      .prop("href", data.result.files[0].url);
  }
});

上传周期中节点元素在回调函数间的互通


通常,你会在元素节点中显示要上传的文件。这可以在 add 回调中完成。

为了能够在与上传相关的其他回调函数中引用这个节点元素,你可以通过 context 选项(实际上就是 jquery.ajax 的一个选项)做到这一点:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p></p>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

通过点击 button 元素开始文件上传


基于前面的示例,可以通过单击 button 元素开始上传,而不是自动开始:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button></button>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p></p>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

客户端实现图像大小调整


请参阅客户端图像大小调整文档

另请查阅 API 指南配置项手册