2016-08-01 83 views
3

这是像场我的html代码:使用AJAX,而无需使用FORMDATA发送图像PHP文件()

<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插件,我想为注册用户上传图片。

+0

如果您不想使用FormData() – madalinivascu

+0

使用隐藏的iframe您不希望使用FormData的原因是什么?这几乎是制作发送二进制数据的AJAX请求的唯一方法。您的替代方案是隐藏框架或标准POST请求。 –

+0

我没有在我的wp页面中使用表单标签,提交'点击'提交按钮动作的细节。我想添加图片上传功能。 – Annapurna

回答

0
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);