Как использовать Dropzone JS с PHP и пользовательским вводом - PullRequest
Новая
       5

Как использовать Dropzone JS с PHP и пользовательским вводом

0 голосов
/ 23 марта 2020

У меня есть веб-страница, где пользователь может отправить одно или несколько изображений. Я разработал это как двухэтапное решение, где step1.php содержит загрузку файлов и флажок: 

<form method="post" action="step2.php" enctype="multipart/form-data" name="upload_form">
  <div class="form-group">
    <label for="InputFile">Choose images:</label>
      <input type="file" name="userfile[]" id="file" size="50"><br/>
      <input type="file" name="userfile[]" id="file" size="50"><br/>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" name="CheckThis" value="CheckThis">
      I have checked this box
    </label>
  </div>
  <input type="hidden" name="id" value="<?php echo $_REQUEST['uid']; ?>">
  <button type="submit" class="btn btn-default">Send inn</button>
</form>

Затем в step2.php я обрабатываю загруженные файлы, делаю миниатюры и спрашиваю Пользователь может дать изображениям заголовок и комментарий.

Теперь я хочу сделать этот сайт более удобным и немного более удобным для Web 2.0: -)

Мой step1.php теперь использует Dropzone: 

<form method="post" action="step2.php" enctype="multipart/form-data" name="upload_form">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="CheckThis" name="CheckThis" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      I have checked this box
    </label>
  </div>
  <input type="hidden" name="id" value="<?php echo $_REQUEST['uid']; ?>">
  <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
  <button type="submit" class="btn btn-primary" id="submit-all" value="Submit">Submit all</button>
</form>

И мой JS: 

    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("div#my-awesome-dropzone", { url: "upload.php"});
    myDropzone.on("sending", function(file, xhr, formData) { 
        // Will sendthe filesize along with the file as POST data.
        formData.append("filesize", file.size);  
        formData.append("foo", "bar");  
    });

upload.php использует пример кода из https://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php

Загрузка работает, когда пользователь выбирает / удаляет несколько файлов в Dropzone, которые загружаются на сервер. Однако я не знаю, как я могу направить пользователя к step2.php, где пользователь может видеть изображения и давать им заголовок или комментарий. Я пытался добавить formData, как вы можете видеть, но эти данные отправляются в upload.php, а не step2.php.

Обновление: Чтобы прояснить мою проблему: Если step2.php просто содержит: 

<?php
phpinfo(INFO_VARIABLES);
?>

Я не вижу ни ссылок на загруженные файлы, ни переменные filesize и foo, которые я объявил в JS.

Как можно Я передаю данные из Dropzone и upload.php в step2.php?

или , я делаю это по старинке? Должен ли я сделать это совершенно другим способом? Могу ли я попросить пользователей отправить заголовок и комментарий на страницу step1.php, а также отправить / загрузить все по завершении? Как перенаправить их на целевую страницу после завершения?

...