Dropzone.js如何向上传的图像添加带有值的隐藏输入

Question

我在使用 dropzone.js 向上传的图像添加隐藏输入字段时遇到问题。

我想要做的是使用 dropzonejs 将图像上传到网站，然后有可能使用 jquery 排序来拖动和更改图像的顺序。

到目前为止，我已经成功地让它工作了一切，除了当我使用分离的输入数组时，图像的顺序在拖放时不会改变。

为此，我需要找到一种在上传图像时将隐藏输入添加到图像模板的方法。

这是我在 .php 文件中使用的代码

<div class="form-group">
  <div id="media-uploader" class="dropzone"></div>
    <div id="uploaded-media" class="hidden">
    </div>
  </div>

现在上传图片时，隐藏的输入字段会添加到#uploaded-media，但我需要更改它并在上传的图片模板持有者中添加隐藏的输入。

这是上传图片后的样子

<div id="media-uploader" class="dropzone dz-clickable ui-sortable dz-started">
  <div class="dz-default dz-message">
    <span>Drop files here to upload</span>
  </div>
  <div class="dz-preview dz-processing dz-image-preview dz-success dz-complete">  
    <div class="dz-image"><img data-dz-thumbnail="" alt="DSC_3771-Edit.jpg" src=""></div>  
    <div class="dz-details">    
      <div class="dz-size"><span data-dz-size=""><strong>0.9</strong> MB</span></div>    
      <div class="dz-filename"><span data-dz-name="">DSC_3771-Edit.jpg</span></div>  
    </div>  
    <div class="dz-progress">
      <span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
    </div>  
    <div class="dz-error-message"><span data-dz-errormessage=""></span></div>  
    <div class="dz-success-mark">      </div>  
    <div class="dz-error-mark">      </div>
    <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove file</a>
  </div>
</div>

我需要的唯一小改变就是它看起来像这样

<div id="media-uploader" class="dropzone dz-clickable ui-sortable dz-started">
  <div class="dz-default dz-message">
    <span>Drop files here to upload</span>
  </div>
  <div class="dz-preview dz-processing dz-image-preview dz-success dz-complete">  
    <div class="dz-image"><img data-dz-thumbnail="" alt="DSC_3771-Edit.jpg" src=""></div>  
    <div class="dz-details">    
      <div class="dz-size"><span data-dz-size=""><strong>0.9</strong> MB</span></div>    
      <div class="dz-filename"><span data-dz-name="">DSC_3771-Edit.jpg</span></div>  
    </div>  
    <div class="dz-progress">
      <span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
    </div>  
    <div class="dz-error-message"><span data-dz-errormessage=""></span></div>  
    <div class="dz-success-mark">      </div>  
    <div class="dz-error-mark">      </div>
    <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove file</a>
    **<input type="hidden" name="media-ids[]" id="media-ids[]" class="media-ids" value="812">**
  </div>
</div>

这里是dropzone配置

    // Dropzone file uploader
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone ("#media-uploader", {
    url: dropParam.upload,
    autoProcessQueue: true,
    parallelUploads: 1,
    uploadMultiple: false,
    maxFilesize: 3,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    maxFiles: 10,
    success: function (file, response) {
        file.previewElement.classList.add("dz-success");
        file['attachment_id'] = response; // push the id for future reference
        $('#uploaded-media').append( $('<input type="hidden" name="media-ids[]" id="media-ids[]" class="media-ids" value="' + response +'">') );

    },
    error: function (file, response) {
        file.previewElement.classList.add("dz-error");
    },
    // update the following section is for removing image from library
    removedfile: function(file) {
        var attachment_id = file.attachment_id;
        jQuery.ajax({
            type: 'POST',
            url: dropParam.delete,
            data: {
                media_id : attachment_id
            }
        });
        $('input.media-ids[type=hidden]').each(function() {
            if ($(this).val() == attachment_id) {
                $(this).remove();
            }
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    }
});

Answer 1

我找到了解决办法，下面的代码会在上传成功后为每个上传的图片添加一个输入字段

myDropzone.on("success", function(file, response) {
    $(file.previewElement).append( $('<input type="hidden" name="media-ids[]" id="media-ids[]" class="media-ids dz-media-id" value="' + response +'">') );
});

Answer 2

 $("div#js-dropzone").dropzone({
    url: "/api/mmm/orders/fileupload",
    method: 'POST',
    maxFilesize: 5, // MB
    previewTemplate: previewTemplate,
    success: function (response) {
        $(response.previewElement).append('<input type="hidden" name="fileupload" value="' + JSON.parse(response.xhr.response).fileName + '" />');
    }
});