如何通過jquery $ .ajax從更大的表單中處理文件上傳表單？

我遇到了一個問題。我有一個通過$.ajax()提交文章的表單，問題是我給用戶選項上傳文件，而且我不希望頁面刷新，所以我在提交文章的主表單中放置了上傳表單。它似乎我不能嵌套形式..我還需要在$_FILES陣列文件的價值..

這裏是我的HTML表單：

<form action="/" id="upload-form"> 
    <fieldset> 
     <p class="upload-result"> 
     <!-- result of upload goes here --> 
     </p> 
     <p class="upload-images"> 
      <label><?php _e('Upload Images','sofa'); ?></label><a href="" class="button-secondary img_add_upload"><?php _e('Upload Image','sofa'); ?></a><a href="" class="button-secondary img_add_url"><?php _e('Add Image URL','sofa'); ?></a> 
     </p> 
     <p class="upload-url"> 
      <input type="text" name="img_url" id="img_url" value="<?php _e('Enter URL of image here...','sofa'); ?>" /><a href="" class="button-secondary img_add"><?php _e('Add Image','sofa'); ?></a> 
     </p> 
     <p class="upload-file"> 
      <input type="file" id="async-upload" name="async-upload" size="47" /><a href="" class="button-secondary img_upload"><?php _e('Upload','sofa'); ?></a> 
     </p> 
     <ol class="upload-images-lib"> 
      <li></li> 
     </ol><div class="clear"></div> 
     <p class="upload-images-note"><?php printf(__('Click on image to view full size. To mark image as main/featured, add image then click on %s icon.','sofa'), '<img src="'.get_bloginfo('template_directory').'/img/box.png" alt="" />'); ?></p> 
     <p class="upload-input"> 
      <label for="utitle"><?php _e('Title','sofa'); ?></label> 
      <input type="text" name="utitle" id="utitle" value="" /> 
      <span><?php _e('Enter a good title that describes what you are publishing. Be creative!','sofa'); ?></span> 
     </p> 
     <p class="upload-input"> 
      <label for="cat"><?Php _e('Category','sofa'); ?></label> 
      <?php wp_dropdown_categories('hide_empty=0'); ?> 
     </p> 
     <p class="upload-editor"> 
      <?php wp_editor('', 'ucontent', $settings = array(
       'textarea_rows' => 8, 
       'textarea_name' => 'ucontent' 
      )); ?> 
     </p> 
     <p class="upload-input"> 
      <label for="utags"><?php _e('Tags','sofa'); ?></label> 
      <input type="text" name="utags" id="utags" value="" /> 
      <span><?php _e('Enter a comme seperated list of tags that perfectly describe your post. e.g. funny, man, public','sofa'); ?></span> 
     </p> 
     <p class="upload-submit"> 
      <input type="submit" value="<?php _e('Publish','sofa'); ?>" class="gradient-link-normal" /> 
     </p> 
    </fieldset> 
</form>

的問題是這部分內容。

<p class="upload-file"> 
    <input type="file" id="async-upload" name="async-upload" size="47" /><a href="" class="button-secondary img_upload"><?php _e('Upload','sofa'); ?></a> 
</p>

我要處理的文件上傳，這個被點擊時和PHP的形式，它執行文件上傳需要$_FILES陣列明顯。

我不確定這是否可能。任何解決方案

來源

2012-06-02 Ahmed Fouad

您需要使用jQuery插件來處理文件上傳，並處理來自您的剩餘數據，就像您已經做的那樣。

有一些現成的插件來執行文件上傳：

valums ajax upload

jQuery Multiple File Upload Plugin

AjaxFileUpload

jQuery File Upload

你可以找到更多的jQuery的plu g-ins網站。

來源

2012-06-02 20:14:28 Zuul

我不想使用任何插件，也不需要重新創建我創建的所有東西。沒有其他解決方案嗎？ –

@Ahmed Fouad，使用插件可以節省重新發明別人已經發明的功能！另一種解決方案是查看其中一個插件的源代碼，看看它是如何完成的，並根據它創建自己的代碼... – Zuul

@AhmedFouad，另一方面，如果問題只是需要添加文件上傳功能，那麼插件是最簡單的方法。您只需將一些針對特定問題的現成解決方案附加到您當前的代碼中，從而節省您試驗和錯誤的時間！ – Zuul

在網頁上的其他位置放置嵌套表單的最佳方法，並且只在使用「上傳」按鈕上的點擊時才顯示。

上傳表格（小表格）我們最初是不可見的。您可以使用彈出窗口或jquery代碼來顯示。

<div id="smallform"> 
    <form name="upload"> 
     <input type="file" name="picture"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
</div> 

<div id="largeform"> 
<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <a href="#" onclick="showSmallForm()">Upload file</a> 
    <input type="submit"> 
</form> 
</div>

函數showSmallForm（）會在點擊上傳時將小表單顯示爲較大的表單。

來源

2016-02-03 18:54:20

如何通過jquery $ .ajax從更大的表單中處理文件上傳表單？

回答

相關問題