Drupal7 Webform一次性多文件上传方案咨询

Hey there! I’ve tackled this exact scenario on Drupal 7 Webform projects before, so let me walk you through the reliable solutions I’ve used—since the modules you tried didn’t work out.

Option 1: Module-Based Fix with Multiupload Filefield Widget #

You might think this widget is only for core fields, but it plays nicely with Webform with zero extra code:

• Install and enable the multiupload_filefield_widget module (it’s fully compatible with Drupal 7)
• Navigate to your Webform’s component edit page for the file upload field
• Under the Widget type dropdown, select Multiupload filefield widget instead of the default file widget
• Save the component, and your users can now select multiple files at once using their system’s file picker (hold Ctrl/Cmd to select multiple items)

This module handles the multi-select UI seamlessly, and integrates with Webform’s existing submission and file management workflows (like access controls and file cleanup when submissions are deleted).

Option 2: Custom Implementation for Full Control #

If you need advanced features like drag-and-drop or progress bars, you can build a custom solution using the jQuery File Upload library. Here’s how:

Step 1: Add the jQuery File Upload Library to Your Theme #

• Download the core jQuery File Upload files and place them in your theme’s js and css folders
• Update your theme’s .info file to load the assets:

  scripts[] = js/jquery.fileupload.js
  scripts[] = js/jquery.fileupload-ui.js
  stylesheets[all][] = css/jquery.fileupload.css
  

Step 2: Modify the Webform File Component Template #

• Copy the webform-component-file.tpl.php template from the Webform module into your theme’s templates folder
• Update the template to support multiple files by adjusting the file input:

  <div class="webform-component-file <?php print $classes; ?>" id="<?php print $form_id; ?>">
    <?php if (!empty($title)): ?>
      <label class="control-label"><?php print $title; ?> <?php print $required; ?></label>
    <?php endif; ?>
    <?php print $description; ?>
    <div class="form-item">
      <!-- Add multiple attribute and update name to accept an array -->
      <input type="file" name="<?php print $name; ?>[]" id="<?php print $id; ?>" class="webform-multi-upload" multiple="multiple" />
      <div class="upload-progress-bar"></div>
      <div class="uploaded-files-list"></div>
    </div>
  </div>
  

Step 3: Add Custom JS to Handle Uploads #

• Create a webform-multi-upload.js file in your theme’s js folder with this code:

  (function ($) {
    Drupal.behaviors.webformMultiUpload = {
      attach: function (context, settings) {
        $('.webform-multi-upload', context).fileupload({
          url: Drupal.settings.basePath + 'webform-multi-upload-handler',
          formData: {
            'form_token': $('input[name="form_token"]').val(),
            'webform_nid': $('input[name="nid"]').val()
          },
          done: function (e, data) {
            // Attach uploaded file IDs to the form for submission
            $.each(data.result, function (index, fileData) {
              $('<input>').attr({
                type: 'hidden',
                name: 'submitted[your_file_component_key][]',
                value: fileData.fid
              }).appendTo('form');
              // Optional: Add a visible list of uploaded files
              $('.uploaded-files-list').append('<p>' + fileData.filename + '</p>');
            });
          },
          progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.upload-progress-bar').css('width', progress + '%');
          }
        });
      }
    };
  })(jQuery);
  

  Replace your_file_component_key with the actual machine name of your Webform file component.

Step 4: Build a Small Custom Module to Handle File Storage #

• Create a custom module (let’s call it webform_multiupload) with this code to process uploads:

  <?php
  /**
   * Implements hook_menu().
   */
  function webform_multiupload_menu() {
    $items = array();
    $items['webform-multi-upload-handler'] = array(
      'page callback' => 'webform_multiupload_handle_upload',
      'access arguments' => array('access content'),
      'type' => MENU_CALLBACK,
      'delivery callback' => 'drupal_json_output',
    );
    return $items;
  }
  
  /**
   * Handle AJAX file uploads.
   */
  function webform_multiupload_handle_upload() {
    $files = file_save_upload('files', array(
      'file_validate_extensions' => array('jpg jpeg png gif pdf docx'), // Adjust allowed extensions
    ));
    $results = array();
    if ($files) {
      foreach ($files as $file) {
        // Save file to the Webform’s file directory
        $file->status = FILE_STATUS_PERMANENT;
        file_save($file);
        $results[] = array(
          'fid' => $file->fid,
          'filename' => $file->filename
        );
      }
    }
    return $results;
  }
  

Final Tips #

• Always test these solutions on a staging site first to avoid disrupting your live site
• For the custom approach, double-check that Webform’s file cleanup works (it should delete files when submissions are removed, but verify)
• If you go the module route, make sure to keep multiupload_filefield_widget updated alongside Webform

内容的提问来源于stack exchange，提问作者ManIsh