在jQuery文件上传插件中显示/隐藏

时间:2013-07-15 15:18:45

标签: show-hide jquery-file-upload

我正在使用PHP与Sebastian Tschan的“jQuery文件上传插件”(https://blueimp.net)并在上传和下载模板中我想做一些简单的显示/隐藏的东西,但无法弄清楚如何做到这一点。

当您第一次查看页面时,我只希望能够看到“添加文件...”按钮。

然后,当添加文件时(通过任何方法),“开始上传”应该与“取消”按钮一起出现。

上传后,我想要一段文字说“您已成功上传[X]照片。现在我们的评估员会对这些照片进行审核。您对这些上传图片的参考是[XXXXXXXXX]。”。此文本块将直接显示在下载模板中上次上载的图像下方。

显然上传是使用JQuery / JavaScript而不是PHP,我试图寻找某种触发器来检测上传的图像数量以及上传完成的时间。

我还想在触发后禁用“开始上传”按钮,以防止上传文件两次。

问候,尼尔

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            {% if (file.error) { %}
                <div><span class="label label-important">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <p class="size">{%=o.formatFileSize(file.size)%}</p>
            {% if (!o.files.error) { %}
                <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>
            {% if (!o.files.error && !i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" style="display:none;">
                    <!--<i class="icon-upload icon-white"></i>-->`enter code here`
                    <!--<span>Start</span>-->
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>

0 个答案:

没有答案