Dropzone.js 在 wordpress 前端发布中不起作用

Question

我正在我的 WP 网站上构建一个前端发布表单。我的表单的简化代码如下：

<form id="new_post" name="new_post" method="post" action="/add-property-query/" enctype="multipart/form-data">
								<!-- post name -->
								<fieldset name="name">
									<label for="title">Name:</label>
									<input type="text" id="title" value="TestName" tabindex="5" name="title" />
								</fieldset>
					
								<!-- images - _thumbnail_id -->
								<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>
					
								<input type="hidden" name="action" value="new_post" />
								<?php wp_nonce_field( 'new-post' ); ?>
							</form>

我使用了一个完美的图片上传输入。那是服务器端代码的一部分，负责处理图片上传：

//INSERT OUR MEDIA ATTACHMENTS
	        if (!function_exists('wp_generate_attachment_metadata')){
	            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
	            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
	            require_once(ABSPATH . "wp-admin" . '/includes/media.php');
	        }
	         if ($_FILES) {
	            foreach ($_FILES as $file => $array) {
	                if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
	                    return "upload error : " . $_FILES[$file]['error'];
	                }
	            }
	            $boss_thumbnail = media_handle_upload('boss_thumbnail', $pid); // set cover
	        }
	        if ($boss_thumbnail > 0){
	            //set the image as thumbnail:
	            update_post_meta($pid,'_thumbnail_id',$boss_thumbnail);
	        }// END SAVING FILE

我需要与使用 dropzone.js 工作的其他表单字段完全相同的上传机制。正如他们在他们的网站 (dropzonejs.com) 上要求的那样，我在表单中添加了 <script src="./path/to/dropzone.js"></script> 并添加了 dropzone 类。我现在的 HTML 如下：

<script src="./path/to/dropzone.js"></script>
<form id="new_post" name="new_post" method="post" action="/add-property-query/" class="dropzone" enctype="multipart/form-data">
								<!-- post name -->
								<fieldset name="name">
									<label for="title">Name:</label>
									<input type="text" id="title" value="TestName" tabindex="5" name="title" />
								</fieldset>
					
								<!-- images - _thumbnail_id -->
								<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>
					
								<input type="hidden" name="action" value="new_post" />
								<?php wp_nonce_field( 'new-post' ); ?>
							</form>

Dropzone 找到了具有类 dropzone 的表单元素，并自动将其自身附加到它。在前端一切正常。在网站上，他们说可以处理上传的文件，就像有这样的 html 输入：

<input type="file" name="file" />

所以，在服务器上，我将$boss_thumbnail = media_handle_upload('boss_thumbnail', $pid); 更改为$boss_thumbnail = media_handle_upload('file', $pid);，但随后 WP 返回以下错误：Catchable fatal error: Object of class WP_Error could not be converted to string in formatting.php on line 1025。

我什至使用这篇文章 (https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone) 来“将范式与 Dropzone 结合起来”，但对我没有帮助。最终的HTML代码如下：

<link rel="stylesheet" href="http://eventboss.org/wp-content/themes/Travelo/css/dropzone.css">
	<script src="http://eventboss.org/wp-content/themes/Travelo/js/dropzone.js"></script>
	<script>
		jQuery(document).ready(function() {
				Dropzone.options.new_post = { // The camelized version of the ID of the form element
			
			  // The configuration we've talked about above
			  autoProcessQueue: false,
			  uploadMultiple: false,
			  parallelUploads: 100,
			  maxFiles: 100,
			
			  // The setting up of the dropzone
			  init: function() {
			    var myDropzone = this;
			
			    // First change the button to actually tell Dropzone to process the queue.
			    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
			      // Make sure that the form isn't actually being sent.
			      e.preventDefault();
			      e.stopPropagation();
			      myDropzone.processQueue();
			    });
			
			    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
			    // of the sending event because uploadMultiple is set to true.
			    this.on("sendingmultiple", function() {
			      // Gets triggered when the form is actually being sent.
			      // Hide the success button or the complete form.
			    });
			    this.on("successmultiple", function(files, response) {
			      // Gets triggered when the files have successfully been sent.
			      // Redirect user or notify of success.
			    });
			    this.on("errormultiple", function(files, response) {
			      // Gets triggered when there was an error sending the files.
			      // Maybe show form again, and notify user of error
			    });
			  }
			
			}
		})
	</script>

<form id="new_post" name="new_post" method="post" action="/add-property-query/" class="dropzone" enctype="multipart/form-data">
							<!-- post name -->
							<fieldset name="name">
								<label for="title">Name:</label>
								<input type="text" id="title" value="TestName" tabindex="5" name="title" />
							</fieldset>
			
				
							<fieldset class="submit">
								<button type="submit" value="Post Review" tabindex="40" id="submit" name="submit">Submit data and files!</button>
							</fieldset>
				
							<input type="hidden" name="action" value="new_post" />
							<?php wp_nonce_field( 'new-post' ); ?>
						</form>

在服务器端，我只做了上面提到的一项更改。如何使用 dropzone.js 脚本使我的脚本处理图像正确上传？

Answer 1

改变

<input type="file" name="boss_thumbnail" id="boss_thumbnail" tabindex="25" />

到

<input type="file" name="file" id="boss_thumbnail" tabindex="25" />