Dropzone.js + <input type =“file”/>在Wordpress站点上不起作用

时间:2017-01-07 13:34:51

标签: javascript php wordpress dropzone.js

在我的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

0 个答案:

没有答案