Загрузка файла jQuery - несколько форм на одной странице - PullRequest
Новая
       17

Загрузка файла jQuery - несколько форм на одной странице

0 голосов
/ 17 февраля 2019

Я пытаюсь реализовать несколько форм jQuery File Upload на страницу, но документация неясна.

Я уже перепробовал много предложений и хаков от StackOverflow и Google, но многие уже устарели (6+ лет) и не имеют отношения к текущей версии.Вот некоторые темы, которые я просмотрел:

Повторяет документацию

Несколько виджетов загрузки файлов на одной странице - main.js

Не ответил, для другой версии или для очень старой (или их комбинации)

Два виджета для выгрузки файлов jQuery на одной странице

Загрузка файла jQuery - несколько виджетов загрузки файлов на одной странице

Несколько виджетов загрузки файлов jQuery на одной странице

blueimp jQuery File Upload, несколько экземпляров

Здесь находится документация, которая выглядит устаревшей

https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

В main.js предлагается заменить:

$('#fileupload').fileupload();

на: 

    $('.fileupload').each(function () {
        $(this).fileupload({
            dropZone: $(this)
        });
    });

И изменить форму для изменения:

id="fileupload"

до:

class="fileupload"

Но если вы посмотрите на текущий файл main.js в строке, которую он предлагаетзамены нету:https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js

Вот мой текущий (не работает) код:

Форма: 

    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data">

main.js: 

$('.fileupload').each(function () {
  $(this).fileupload({
      dropZone: $(this)
  })
});
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: '/upload.cgi'
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

Я заменил комбинации строк 14, 18 и 25 и перепробовал столько способов, сколько могу, но это либо не работает, либо не работает и выдает ошибки,обычно либо TypeError: document.getElementById (...) имеет значение null или [объект объекта] не найден .

Я не специалист по Javascript или jQueryВот почему я пытался использовать этот плагин в первую очередь.Может кто-нибудь объяснить, как main.js должен выглядеть для работы с несколькими формами, потому что либо документация устарела (2012), либо мое понимание их неверно.Спасибо.

1 Ответ

0 голосов
/ 17 февраля 2019

Ваш javascript немного запутан, и я не совсем уверен, чего вы пытаетесь достичь;) Но если вы застряли, пытаясь инициализировать плагин filesupload для нескольких форм, то, я думаю, это то, что выищу: 

$(".fileupload").each(function() {
  $(this).fileupload({
    dropZone: $(this)
  });
});
.fileupload {
  border: 5px dashed red;
  display: inline-block;
  width: 50px;
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>

<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
<form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>

РЕДАКТИРОВАТЬ:

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

Я бы порекомендовал включить ваш JavaScript в конце вашей страницы, если это возможно, в теге body.Сначала зависимости (jquery, jquery-ui и fileupload), а затем ваши собственные сценарии (в данном случае main.js).Вот где должна быть реализована загрузка мультиформного файла.Я надеюсь, что приведенный ниже пример поможет вам понять:

page.html 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>
    <form class="fileupload" action="upload.cgi" method="POST" enctype="multipart/form-data"></form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js 

$(".fileupload").each(function() {
  $(this).fileupload({
    dropZone: $(this)
  });
});
...