logo标签列表

Blueimp jQuery文件上传，传递额外的表单数据

phpjqueryxmlformsfile-upload
14

我需要一些帮助... 我已经成功使用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 中的许多内容，比如如何解析文件[]数组以获取文件名等信息，也不确定如何接收package[]和notes[]数组，并逐个迭代它们，以及如何将所有信息放入文本/XML文件中。

是否有人可以耐心地并具有一些经验来帮助解决这个插件/这些问题的下一步呢？非常感谢您的帮助。

4个回答
15
有人问（在现已删除的评论中）为什么我用一个资源链接来回答这个问题，而这个资源链接OP已经在原始问题中包含了。考虑到这是很久以前回答的，我只能猜测当时回答时忽略了这一点。但看到我的回答获得了不少赞，我决定保留它，因为它对某些人有价值（可能是因为它使得该资源更加突出）。 - James P McGrath
10

要传递额外的表单数据，您可以执行类似以下操作：

    $('[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数组中提交的'package'和 'notes'数据。

当提交的数据不是数组数据（例如，通过复选框提交多个值）时，我建议避免在表单元素名称中使用“[]”。

我遇到了这个问题..但是你帮我解决了，谢谢@jasonjonesutah - Bastin Robin
4
注意：如果上传的文件大于post_max_size或upload_max_filesize（在php.ini中），则您的表单数据可能会丢失。您还应该添加maxChunkSize参数（例如maxChunkSize:10*1024*1024），以便将大文件拆分为包含formData的小型10MB块。 - emale
1
在upload.php文件中，如果你想找到你需要的参数，可以尝试检查全局变量$_REQUEST、$_GET或者$_POST。 http://php.net/manual/en/reserved.variables.request.php 例如，如果你正在向upload.php传递一个名为'package[]'的参数，你可以在upload.php中使用$_REQUEST['package[]']来访问它。
希望这能对你有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接