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

Question

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

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

到目前为止，我已经设法使它能够工作，除了当我使用分离的输入数组时，图像的顺序在拖放时不会改变。

为了实现这一点，我需要找到一种方法，在上传图像时向图像模板添加隐藏输入。

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

<div class="form-group">
<div id="media-uploader" class="dropzone"></div>
<div id="uploaded-media" class="hidden">
</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>
</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 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 + '" />');
}
});