Ajax Send Base64로 인코딩 된 이미지를 서버에 저장

Question

jquery ajax를 통해 base64 url을 전달하고 서버에 저장하려고합니다. 그러나 아래 코드는 빈 파일을 제공합니다. 나는 디코딩 된 문자열과 문자열로부터 createimage를 작성하려고했지만 두 변수 모두 0 비트가 기록되었습니다. 내가 작업 한 값을 테스트 할 때 [object FileReader]를 출력합니다 ...... 나는 단계가 빠져 있거나 실수를하고있는 것 같습니다.

이미지를 $ _FILE 유형의 객체로 변환하는 방법이 있습니까? 이유는 가능한 경우 파일을 저장하기 위해 wordpress 함수를 사용하는 것과 같습니다.

PHP 코드 :

function uploadimg() { 

$error = false; 
//if (! function_exists('wp_handle_upload')) require_once(ABSPATH . 'wp-admin/includes/file.php'); 
//$upload_overrides = array('test_form' => false); 
$images=array(); 

$a=0; 
unset ($_POST['action']); 

foreach($_POST as $basefile){ 


    $upload_dir  = wp_upload_dir(); 
    $upload_path  = str_replace('/', DIRECTORY_SEPARATOR, $upload_dir['path']) . DIRECTORY_SEPARATOR; 
    $base64_string = $basefile; 
    echo $basefile; 
    $base64_string = preg_replace('/data:image\/.*;base64,/', '', $base64_string); 
    $decoded_string= base64_decode($base64_string); // 0 bytes written in fwrite 
    $source = imagecreatefromstring($decoded_string); // 0 bytes written in fwrite 
    $output_file = $upload_path.'myfilef'.$a.'.jpg'; 
    $images[]=$output_file; 
    $a++;  
    $image = fopen($output_file, 'wb'); 

    $bytes=fwrite($image, $source); 
    echo $bytes; 
    fclose($image); 
} 
echo json_encode($images); 
exit; 

} 

add_action('wp_ajax_uploadimg', 'uploadimg'); 
add_action('wp_ajax_nopriv_uploadimg', 'uploadimg'); 

jQuery를 샘플 코드 아래에 jQuery를 업데이트 올바른 방향으로 날을 가리키는위한 폴스에

jQuery(document).on('change', '.imageup', function(event){ 
    errors= []; 
    errnum=0; 
    numberofimages=jQuery("#selectedimages > div").length; //get number of images 

    if(numberofimages<10){ 

     var id= jQuery(this).attr('id'); 
     var length= this.files.length; 

     if(length>1) {// if a multiple file upload 

     var images = new FormData(); 
     images.append('action', 'uploadimg'); //wordpress specific 

      jQuery.each(event.target.files, function(key, value){ 


       var size= value.size; 

       var extension= value.name.substring(value.name.lastIndexOf('.') + 1).toLowerCase(); 
       var allowedExtensions = ['png', 'jpg', 'jpeg', 'gif']; 
       if(allowedExtensions.indexOf(extension) !== -1) { 

       if(numberofimages<10){ 

       var file=value; 
       console.log(file); 
       var fileReader = new FileReader(); 


        fileReader.onload = function (e) { 
         var img = new Image(); 


         img.onload = function() { 
          var MAX_WIDTH = 100; 
          var MAX_HEIGHT = 100; 
          var width = img.width; 
          var height = img.height; 

          if (width > height) { 
          if (width > MAX_WIDTH) { 
          height *= MAX_WIDTH/width; 
          width = MAX_WIDTH; 
          } 
         } else { 
        if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT/height; 
        height = MAX_HEIGHT; 
        } 
     } 

     var canvas = document.createElement("canvas"); 
     canvas.width = width; 
     canvas.height = height; 
     canvas.getContext("2d").drawImage(this, 0, 0, width, height); 

     this.src = canvas.toDataURL('image/png'); 

    } // end on load function 

    img.src = e.target.result; 

} //end filereader function 

fileReader.readAsDataURL(file); 
console.log(fileReader); 

        images.append(key, fileReader); 
         numberofimages++; 


       } else { 
         errnum++; 
         errors[errnum]= value=' is a illegal file type'; 
        } 
       }   


      }); 

     //image holder finished, remove 
     jQuery('#'+id).remove(); 


     jQuery.ajax({ 
      url: '/wp-admin/admin-ajax.php', 
      type: 'POST', 
      data: images, 
      cache: false, 
      processData: false, 
      contentType: false, 
       success: function(data) { 
        console.log(data); 
      }//end of success function 
     }); 

Answer 1

확인 감사합니다 .... ........ PHP 최대 가기 실 거예요 내가 (비록 내가 어디로가는 지 보여줄 아래에 메모를 포함) 아약스를 잘라내 배열은 다른 파일 이름뿐만 아니라 base64 URL을 추가로 다릅니다. jsfiddle http://jsfiddle.net/dheffernan/6Ut59/

기본적 흐름 1.Check 최대 파일은 각각의 파일에 대해 그것을 넘지 않는 2 & 확인을 허용한다.
3 파일 판독기가로드되면 resizeBase64img를 호출하십시오 (제출 한 사람 덕분에) 4. 처리 할 마지막 파일 인 경우 - Ajax를 통해 FormData 제출 5. 이미지가 입력 div를 반환 할 때 & if 전체 삭제 파일 입력

function resizeBase64Img(base64, width, height) { 
var canvas = document.createElement("canvas"); 
canvas.width = width; 
canvas.height = height; 
var context = canvas.getContext("2d"); 
var deferred = $.Deferred(); 
$("<img/>").attr("src", base64).load(function() { 
    context.scale(width/this.width, height/this.height); 
    context.drawImage(this, 0, 0); 
    deferred.resolve($("<img/>").attr("src", canvas.toDataURL('image/jpg')));    
}); 
return deferred.promise();  
} 



function readFile(file) { 
var reader = new FileReader(); 
var deferred = $.Deferred(); 

reader.onload = function(event) { 
    deferred.resolve(event.target.result); 
}; 

reader.onerror = function() { 
    deferred.reject(this); 
}; 

if (/^image/.test(file.type)) { 
    reader.readAsDataURL(file); 
} else { 
    reader.readAsText(file); 
} 

return deferred.promise(); 
} 

jQuery(document).on('change', '.imageup', function(event){ 
var maximages=4; 
var imagecount=jQuery("#imagesholder > div").length; 
var length= this.files.length; 
var images= new FormData; 
var processKey=0; 
var i=1; 
jQuery.each(event.target.files, function(key, value){ 
    // number of images control. 
    imagecount++; 
    if(imagecount > maximages) { 
     var full=true; 
     jQuery('.imageup').remove(); 
     jQuery('#imageinput').html("Image Quota Full, Please delete some images if you wish to change them"); 
     return; 
    } else if (imagecount == maximages) { 
     var full=true; 
     jQuery('.imageup').remove(); 
     jQuery('#imageinput').html('<div class="image-box-full">Image Quota Full: delete images to change them</div>'); 
    } 

    //call resize functions 
    var name=value; 
    $.when(readFile(value)).done(function(value) { 

     resizeBase64Img(value, 300, 200).done(function(newImg){ 
      images[processKey]=[]; 
      images[processKey]['url']=newImg[0].src; 
      images[processKey]['name']=name.name; 
      processKey++; 

if(length===processKey) { 
//----------------INSERT AJAX TO RUN HERE SUBMITTING IMAGES (THE FORMDATA) E.G 
jQuery.ajax({ 
      url: '/wp-admin/admin-ajax.php', 
      type: 'POST', 
      data: images, 
      cache: false, 
      processData: false, 
      contentType: false, 
       success: function(data) { 
        console.log(data); 
        } 
     }); 
} 

$('#imagesholder').append('<div id="delete'+i+'">'+'<div class="image-box"><div class="box-image"><img src="'+newImg[0].src+'" style="width:50px;"/></div><div class="image-box-text">'+name.name+'</div><input type="image" src="http://testserverdavideec.mx.nf/wp-content/uploads/2014/04/success_close.png" class="deletebutton" id="delete/i'+i+'"/></div> </div>'); 

i++; 

      if(full === true) { 
      jQuery('.image-box-full').show(); 
      } 
     }); 

    });//end when 

});//end each 

jQuery(this).val(''); 
});//end on change