在Wordpress中使用Ajax上传多个文件

时间:2019-04-18 11:38:13

标签: javascript jquery ajax wordpress

我正在尝试从一个输入字段上传多张图像,并希望通过Ajax发送包含图像和操作的表单数据。下面我分享我的代码

jQuery(document).ready(function() {
	var ajax_url = 'admin-ajax.php';
    // When the Upload button is clicked...
    jQuery(document).on('click', '#upload_multiImages', function(e){
    	e.preventDefault;

    	var fd = new FormData();
        var files_data = jQuery('.files-data'); // The <input type="file" /> field
        
        // Loop through each data and create an array file[] containing our files data.
        jQuery.each($(files_data), function(i, obj) {
        	
        	jQuery.each(obj.files,function(j,file){
        		fd.append('files[' + j + ']', file);
        	})
        });
        // our AJAX identifier
        fd.append('action', 'cvf_upload_files');  
        jQuery.ajax({
        	type: 'POST',
        	url: ajax_url,
        	data: fd,
        	contentType: false,
        	processData: false,
        	success: function(response){
        		console.log(response);
                jQuery('.upload-response').html(response); // Append Server Response
              }
            });
      });
  });
<input name="my_file_upload[]" id="my_file_upload" type="file" multiple="multiple" accept = "image/*" class="files-data form-control multi with-preview" value="Drag and Drop" />
						<input name="all_vendor_file" type="hidden" value="<?php //echo implode(',', $vendor_images);?>">
					
					<button type="submit" name="upload" id="upload_multiImages">Upload</button>
          
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

但是,作为回应,我只获取未追加操作文件,因此无法通过ajax函数获取文件数据。

0 个答案:

没有答案