【发布时间】：2014-04-27 13:10:11
【问题描述】：
我通过 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(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
});
【问题讨论】：
-
readAsDataURL是异步的，当它成功完成时，load 事件将在fileReader上触发，readAsDataURL的结果将在 结果 属性。请参阅FileReader on MDN 了解更多信息。 -
onload 包含在正确的 jquery 代码中......我在上面更新了更多......
-
我不明白你是如何等待 onload 在循环结束后发送之前
-
嗯，我明白你的意思了.....知道等待可变数量值的方法吗？
-
实际上现在应该没问题，我完成后会更新答案。如果有人有 cmets，工作正在进行中jsfiddle.net/dheffernan/6Ut59
标签： javascript php ajax wordpress