Blueimp jQuery文件上傳，傳遞額外的表單數據

Question

我可以使用一些幫助...我已經設法使blueimp jQuery文件上載成為我的工作，但是我仍然絕對是一個新手，我對jQuery等知之甚少，因此請盡量清楚地告訴我盡可能簡單。 我會盡力而為。

好的，我想實現的目標是人們可以上傳照片，並為每張照片選擇其他選項（通過下拉菜單 ）並添加其他詳細信息（通過文本輸入框 ）。 這些額外的表單字段將與上傳的文件數組一起傳遞到數組中。 每個文件名及其相應的菜單選擇和詳細信息最終將與上傳的照片一起存儲在動態生成的XML或文本文件中 。

我知道類似的問題在github上已經出現過，我已經看到了像這樣的解決方案（https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data ），但我使用的是最新版本的插件，因此無法在我的任何文件中找到與之等效的代碼。

到目前為止，我已經添加：

<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>

到index.html文件中（位於“刪除”按鈕代碼之后），然后將結束表單標簽移動到模板上傳腳本之后，以包括這些字段。 我知道這沒有太大的進展。

這是大部分index.html

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme">
<link rel="stylesheet" href="../jquery.fileupload-ui.css">
<link rel="stylesheet" href="style.css">
<h2>File Upload</h2>
<div id="fileupload">
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </label>
        <button type="submit" class="start">Start upload</button>
        <button type="reset" class="cancel">Cancel upload</button>
        <button type="button" class="delete">Delete files</button>
    </div>
//</form> originally here, moved below
<div class="fileupload-content">
    <table class="files"></table>
    <div class="fileupload-progressbar"></div>
</div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload{{if error}} ui-state-error{{/if}}">
    <td class="preview"></td>
    <td class="name">${name}</td>
    <td class="size">${sizef}</td>
    {{if error}}
        <td class="error" colspan="2">Error:
            {{if error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
    {{/if}}
    <td class="cancel"><button>Cancel</button></td>
</tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
<tr class="template-download{{if error}} ui-state-error{{/if}}">
    {{if error}}
        <td></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        <td class="error" colspan="2">Error:
            {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
            {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
            {{else error === 3}}File was only partially uploaded
            {{else error === 4}}No File was uploaded
            {{else error === 5}}Missing a temporary folder
            {{else error === 6}}Failed to write file to disk
            {{else error === 7}}File upload stopped by extension
            {{else error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
            {{else error === 'emptyResult'}}Empty file upload result
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="preview">
            {{if thumbnail_url}}
                <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
            {{/if}}
        </td>
        <td class="name">
            <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
        </td>
        <td class="size">${sizef}</td>
        <td colspan="2"></td>
    {{/if}}
    <td class="delete">
        <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
    </td>
<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>
</tr>
</script>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="../jquery.iframe-transport.js"></script>
<script src="../jquery.fileupload.js"></script>
<script src="../jquery.fileupload-ui.js"></script>
<script src="application.js"></script>

我對upload.php並沒有多大意義，在files []數組中解析文件名等的地方，也不確定在哪里接收package []和notes []數組，並遍歷它們，以及如何將所有這些信息放入文本/ XML文件中。

任何有一點耐心和一些使用此插件的經驗/這些問題的人都可以引導我完成后續步驟嗎？ 非常感謝你的幫助。

Answer 1

我發現此資源有助於通過上傳的文件傳遞額外的表單數據：

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data

抱歉，我沒有時間寫更詳細的答案。

Answer 2

要傳遞額外的表單數據，您可以執行以下操作：

    $('[name=files\\[\\]]').fileupload({
        //...your initialization of the file uploader here
    }).bind('fileuploadsubmit', function (e, data) {
        data.formData = {
            'package': $('[name=package\\[\\]]').val(),
            'notes': $('[name=notes\\[\\]]').val()
        };
    });

在PHP方面，您可以在$ _POST數組中查找已提交的“包”和“注釋”數據。

當要提交的數據不再是數組數據（例如，提交多個值的復選框）時，我將避免在表單元素名稱中使用“ []”。

Answer 3

我還需要傳遞一個額外的參數，並發現formData選項可用於以編程方式設置其他表單數據。

$('#fileupload').fileupload({
    formData: {
                    param1: 'test'
                    ,param2: "value2"
                    ,param3: "yasseshaikh"
              }
});

來源： 以編程方式添加其他表單數據

Answer 4

在upload.php中-要查找所需的參數，請嘗試檢查全局變量$ _REQUEST，$ _ GET或$ _POST http://php.net/manual/zh/reserved.variables.request.php

因此，例如，如果您要向“ upload.php”發送“ package []”參數，則可以使用$ _REQUEST ['package []']在upload.php內部訪問它

希望這可以幫助。