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" />