Загрузка файла Blueimp jQuery с передачей дополнительных данных формы - PullRequest
13 голосов
/ 18 сентября 2011

Я мог бы использовать некоторую помощь ... Мне удалось сделать загрузку файлов 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.

Может ли кто-нибудь, у кого есть немного терпения и некоторый опыт работы с этим плагином / эти проблемы, проведет меня через следующие шаги?Большое спасибо за вашу помощь.

Ответы [ 4 ]

13 голосов
/ 13 марта 2012

Я нашел этот ресурс полезным для передачи дополнительных данных формы через загруженные файлы:

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

Извините, что у меня нет времени, чтобы написать более подробный ответ.

10 голосов
/ 14 апреля 2013

Для передачи дополнительных данных формы вы можете сделать что-то похожее на:

    $('[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 отправленный «пакет» и данные заметок.

Я бы не использовал '[]' в именах элементов формы, когда отправляемые данные не будут массивными данными (например, флажки, в которых отправляется несколько значений).

4 голосов
/ 05 ноября 2013

Мне также нужно было передать дополнительный параметр и обнаружил, что опция formData может использоваться для программной установки дополнительных данных формы.

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

Источник: Добавление дополнительных данных формы программным способом

1 голос
/ 30 сентября 2011

В upload.php - чтобы найти параметры, которые вы ищете, попробуйте проверить глобальные переменные $ _REQUEST, $ _GET или $ _POST http://php.net/manual/en/reserved.variables.request.php

Так, например, если вы отправляете 'Параметр package [] 'для upload.php вы можете получить к нему доступ через upload.php, используя $ _REQUEST [' package [] ']

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...