单页面安装多个上传组件


将插件中任意 HTML 文件(例如 index.html)中的“fileupload”元素,“fileupload”元素一般在 form 表单中,将其id="fileupload" 改为class="fileupload",然后拷贝多个副本,就像下面这样:

<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <!-- ... -->
</form>
<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <!-- ... -->
</form>

在你的客户端安装代码中(参见 API 指南),按照下述方式对多个文件上传组件进行初始化:

$('.fileupload').each(function () {
    $(this).fileupload({
        dropZone: $(this)
    });
});

现在,你对多个完全独立的上传组件就完成初始化了,其每一个都拥有自身的拖拽区域。

注意:

如果你只想允许每个组件指定的拖放区域,即禁止浏览器在全窗口进行拖放(默认),在你的脚本中添加下面代码:

$(document).bind('drop dragover', function (e) {
    e.preventDefault();
});
注意,若要禁用浏览器默认的拖放动作,那么“drop”事件和“dragover”事件必须同时阻断才能生效。

独立 upload/download 模板


为了给不同的上传组件设置不同的 upload/download 模板,在初始化步骤,你可以设置如下配置项(参考配置项手册):

  • uploadTemplateId
  • downloadTemplateId

要设置这些配置项最简单的方法就是在元素中通过 data 属性进行设置,如下所示:

<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data"
    data-upload-template-id="template-upload-1"
    data-download-template-id="template-download-1">
    <!-- ... -->
</form>
<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data"
    data-upload-template-id="template-upload-2"
    data-download-template-id="template-download-2">
    <!-- ... -->
</form>