在我的WP网站上,我有前端发布表单: 1)普通字段(它们用于显示帖子的标题,描述等) 2)dropzone.js字段用于多个图像上传(它用于显示图像库)
在添加普通<input type="file">
字段以添加帖子的精选图像之前,它完全有效。在这种情况下,我可以捕获丢弃到dropzone字段的图像,但我无法从服务器端的<input type="file">
字段获取图像。怎么了?在我的案例中是否有其他替代解决方案?
我的表格:
<link rel="stylesheet" href="http://eventboss.org/wp-content/themes/Travelo/css/dropzone.css">
<form id="createProject" name="new_post" method="post" action="http://eventboss.org/add-property-query/" class="wpcf7-form dropzone" enctype="multipart/form-data">
<!-- post name -->
<fieldset name="name">
<label for="title">Wine Name:</label>
<input type="text" id="title" value="TestName" tabindex="5" name="title" />
</fieldset>
<!-- post brief -->
<fieldset class="trav_tour_brief">
<label for="trav_tour_brief">Travel Brief</label>
<input value="TestBrief" type="text" value="" id="trav_tour_brief" tabindex="20" name="trav_tour_brief" />
</fieldset>
<!-- Gallery -->
<div class="col-md-4 col-xs-12 picture dropzone-previews">
<div class="egal-center">
<h5>
Add Picture
</h5>
<div class="upload-box btn">
<i class="glyphicon glyphicon-plus"></i>
</div>
</div>
</div>
<!-- Featured image -->
<div class="images">
-<label for="boss_thumbnail">Front of the Bottle</label>
<input type="file" name="boss_thumbnail" id="boss_thumbnail" tabindex="25" />
</div>
<fieldset class="submit">
<button type="submit" value="Post Review" tabindex="40" id="submit" name="submit">Submit data and files!</button>
</fieldset>
</form>
</div>
<script src="http://eventboss.org/wp-content/themes/Travelo/js/dropzone.js"></script>
<script>
Dropzone.options.createProject = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100, //1
maxFiles: 100, //1
previewsContainer: ".dropzone-previews",
dictDefaultMessage: '',
clickable: '.upload-box',
paramName:"picture",
init: function() {
var myDropzone=this;
this.element.querySelector("button[type=submit]").addEventListener("click", function(e){
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on('addedfile', function(file){
//$('.upload-box').hide();
});
this.on('success', function(file){
//alert(file.xhr.response);
});
}
}
</script>
我服务器端代码的一部分:
media_handle_upload('picture', $pid); // get gallery images from the dropzone.js
media_handle_upload('boss_thumbnail', $pid); // get image from <input type="file"> field