将Base64编码的图像保存到服务器

将Base64编码的图像保存到服务器

本文介绍了Ajax发送&将Base64编码的图像保存到服务器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我通过jquery ajax传递base64 url​​并想要保存到服务器上。但是下面的代码给了我一个空文件。我曾尝试从字符串中编写已解码的字符串和createimage,但是对于这两个变量,已经编写了0个字符。当我测试正在处理它的值时,输出[object FileReader] ......我想我要错过一步或在某处犯错。

I am passing a base64 url through jquery ajax and want to save onto the server. But the code below is giving me a empty file. I have tried writing the decoded string and createimage from string but with both variables, 0 bites have been written. When i test the value being worked on it outputs [object FileReader]......i think either i am missing a step or making a mistake some where.

还有办法将图像转换为$ _FILE类型的对象吗?如果可能的话,我喜欢使用wordpress函数来保存文件。

Also is there a way to convert the image to a $_FILE type object? reason being id like to using a wordpress function to save the file if possible.

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 sample code

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


推荐答案

好的,感谢PaulS让我指向正确的方向....更新jQuery下面........ php up顶部不会使用这个(即时通讯切断了ajax,即使我已经包含了一个注释,以显示它去哪里)阵列是不同的,因为我添加在文件名以及base64网址中。

ok thanks to PaulS for pointing me in the right direction....updated jQuery below........the php up top wont work with this (im cutting out the ajax even though i have included a note below to show where it goes) the array is different as i added in the filename as well as the base64 url.

jsfiddle

jsfiddle http://jsfiddle.net/dheffernan/6Ut59/

基本上流量是,
1.检查最大文件允许
2&然后对于每个文件检查它不会超过它。

3调用文件读取器,加载时,调用resizeBase64img(感谢提交者)
4.如果在最后一个要处理的文件上 - 通过Ajax
提交FormData 5.当文件返回输入div以显示图像&如果完全删除文件输入

Basically the flow is,1.Check max files allowed2 & then for each file check it does not exceed it.
3 Call filereader, when loaded, call resizeBase64img (thanks to the person who submitted that)4. if on the last file to be processed -- submit FormData via Ajax5.When file returns input div to show image & if full remove file input

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

这篇关于Ajax发送&amp;将Base64编码的图像保存到服务器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 06:59