簡體   English   中英

BlueImp jQuery FIle Upload-向每個文件添加附加數據

[英]BlueImp jQuery FIle Upload - Adding addition data to each file

我最近進行了一個項目,以創建一個簡單的多文件上傳系統,您可以在其中為每個上傳的文件分配一個標題。 現在建議我使用Blueimp的jQuery File uploader,因為它提供了拖放功能。

所以這是我感到困惑的地方。 我已經看過blueimp在GitHub 鏈接上給出的教程或描述。 我可以添加其他字段,但這適用於所有上傳的文件。 (我正在使用CodeIgniter將文件處理到DB)。

那么我該如何為每個添加的文件添加一個單獨的標題? 因為我無法理解github上的tut。 (也許是我可以從中吸取教訓的jsfiddle示例?)

編輯*

現在,我設法添加了額外的輸入框...最后添加起來非常簡單(doh!)。 所以這就是我的index.html文件中的內容

<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 class="title"><label>File Title: <input name="title[]" required="required"></label></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">
                    <i class="icon-upload icon-white"></i>
                    <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>

我也將其添加到main.js文件的底部

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    var inputs = data.context.find(':input');
    if (inputs.filter('[required][value=""]').first().focus().length) {
        return false;
    }
    data.formData = inputs.serializeArray();

我的下一個問題是如何立即將標題分配為文件名?

只需添加不帶擴展名的file.name作為文本字段的值即可。

 <td class="title"><label>File Title: <input name="title[]" value="{%= file.name.split('/').pop().split('.').shift()%}" required="required"></label></td> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM