使用 ajax 将图像发送到 php 文件而不使用 FormData()答案

【问题标题】：Send image to php file using ajax without using FormData()使用 ajax 将图像发送到 php 文件而不使用 FormData()
【发布时间】：2016-12-06 05:41:09
【问题描述】：

这是我的图像字段的 html 代码：

<div class="row input_detail">
    <div class="col-lg-4 col-md-4 ">
        <label>Upload Image:</label>
    </div>
    <div class="col-lg-8 col-md-8">
        <input type="file" id="picture" name="pro_picture"/>
    </div>
</div>

而且，我正在使用 jQuery.post() 进行 ajax 请求。我正在设计一个 WP 插件，我想在其中为注册用户上传图像。

【问题讨论】：

如果您不想使用 FormData()，请使用隐藏的 iframe
出于什么原因不想使用 FormData？这几乎是发出发送二进制数据的 AJAX 请求的唯一方法。您的替代方案是隐藏框架或标准 POST 请求。
我没有在我的 wp 页面中使用表单标签，提交有关提交按钮的“点击”操作的详细信息。我想添加图片上传功能。
@Annapurna this 答案应该可以解决您的问题。您也可以使用FormData 而不使用表单。

标签： php jquery ajax wordpress image

【解决方案1】：

var image="";
$("#picture").on('change',function(){
    if (this.files && this.files[0]) {
        var FR= new FileReader();
        FR.onload = function(e) {       
            image=e.target.result;
        }
        FR.readAsDataURL( this.files[0] );
    }
});
$.ajax({
    url: '<?php echo $this->getUrl("*/*/upload/id/" . $this->getRequest()->getParam('id')) ?>', // change it to your image handle controller
    type: 'POST',
    data: {"image":image},
    cache: false,
    processData: false,
    contentType: false, 
    success: function(data, status, xhr) {                             
          //do your stuff              
    },
    error: function(xhr, status, error) {                    
        console.log('Error saving the images to database: ' + status);                    
    }
});

您必须将帖子 ID 放入 wp_insert_attachment 函数中。

    $upload_dir = wp_upload_dir();  
    $filename   = 'sample.jpg';             
    if( wp_mkdir_p( $upload_dir['path'] ) ) {
        $file = $upload_dir['path'] . '/' . $filename;
    } else {
        $file = $upload_dir['basedir'] . '/' . $filename;
    }                       
    $base64img = str_replace('data:image/jpeg;base64,', '', $_POST['image']);
    $img_data = base64_decode($base64img);  
    $validate_image = imagecreatefromstring($img_data);
    if($validate_image  !== false){     
        imagedestroy($validate_image);      
        file_put_contents($file, $img_data);
        $wp_filetype = wp_check_filetype( $filename, null );            
        $attachment = array(
            'post_mime_type' => $wp_filetype['type'],
            'post_title'     => sanitize_file_name( $filename ),
            'post_content'   => '',
            'post_status'    => 'inherit'
        );      
        $attach_id = wp_insert_attachment( $attachment, $file,  'put the post id here');            
        require_once(ABSPATH . 'wp-admin/includes/image.php');          
        $attach_data = wp_generate_attachment_metadata( $attach_id, $file );            
        wp_update_attachment_metadata( $attach_id, $attach_data );

【讨论】：