☰

AJAX ファイルのアップロードに FormData を使用するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript jquery ajax file-upload
AJAX ファイルのアップロードに FormData を使用するにはどうすればよいでしょうか? 質問する

これはドラッグ アンド ドロップ機能を使用して動的に生成している HTML です。

<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
    <div id="legend" class="">
        <legend class="">file demoe 1</legend>
        <div id="alert-message" class="alert hidden"></div>
    </div>

    <div class="control-group">
        <!-- Text input-->
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
            <input type="text" placeholder="placeholder" class="input-xlarge" name="name">
            <p class="help-block" style="display:none;">text_input</p>
        </div>
        <div class="control-group">  </div>
        <label class="control-label">File Button</label>

        <!-- File Upload --> 
        <div class="controls">
            <input class="input-file" id="fileInput" type="file" name="file">
        </div>
    </div>
    <div class="control-group">    

        <!-- Button --> 
        <div class="controls">
            <button class="btn btn-success">Button</button>
        </div>
    </div>
</fieldset>
</form>

これは私の JavaScript コードです:

<script>
    $('.wpc_contact').submit(function(event){
        var formname = $('.wpc_contact').attr('name');
        var form = $('.wpc_contact').serialize();               
        var FormData = new FormData($(form)[1]);

        $.ajax({
            url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
            data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
            type : 'POST',
            processData: false,
            contentType: false,
            success : function(data){
            alert(data); 
            }
        });
   }

ベストアンサー1

フォームデータを正しく使用するには、2 つの手順を実行する必要があります。

準備

フォーム全体をFormData()に渡して処理することができます

var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

またはFormData()に正確なデータを指定する

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);

フォームを送信

jQuery を使用した Ajax リクエストは次のようになります。

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});

その後、通常のフォームを送信するのと同じようにAjaxリクエストを送信します。enctype="multipart/form-data"

type:"POST"更新:すべてのファイルは POST リクエストを介して送信する必要があるため、このリクエストは in オプションなしでは機能しません。

注: jQuery 1.6 以降でのみcontentType: false使用可能

おすすめ記事