Question

我正在尝试通过ajax上传图片。在客户端，我正在使用此代码。

$(document).on('change','.image_upload',function(){
        readURL(this);
    });
    ///
    function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {


                     save_profile_image(e.target.result);


                }

                reader.readAsDataURL(input.files[0]);
            }
            else {
                swal("Sorry - you're browser doesn't support the FileReader API");
            }
        }

        function save_profile_image(image_data){
        var image_code = encodeURIComponent(image_data);
        $.ajax({
            type: "POST", 
            url: '<?=base_url()."Dashboard/new_valet_picture";?>',
            data:'valet_image='+image_code,
            success: function(data){
                alert('data');
            }
        });
    }

在客户端，我使用codeigniter将其保存为图像。图像文件已创建但不会显示，因为它包含错误。这是我的CI函数，其中发送此ajax请求。

public function new_valet_picture(){
        $user = $this->session->user_id;
        $image_data = $this->input->post('valet_image');
        $name= "valet_".$user.time().".png";

        $profile_image = str_replace('data:image/png;base64,', '', $image_data);
        $profile_image = str_replace(' ', '+',$profile_image);
        $unencodedData=base64_decode($profile_image);
        $pth = './uploads/valet_images/'.$name;


        file_put_contents($pth, $unencodedData);

        echo $name;

    }

任何人都可以找出我错在哪里。

Answer 1

你在ajax请求中传递参数是错误的：

这是你的代码

$.ajax({
        type: "POST", 
        url: '<?=base_url()."Dashboard/new_valet_picture";?>',
        data:'valet_image='+image_code,
        success: function(data){
            alert('data');
        }
    });

data:'valet_image='+image_code,传递错误，并将其更改为data : {vallet_image : image_code}。

Answer 2

只是改变encodeURIComponent()的位置帮助我

///
        function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {


                         save_profile_image(encodeURIComponent(e.target.result));


                    }

                    reader.readAsDataURL(input.files[0]);
                }
                else {
                    swal("Sorry - you're browser doesn't support the FileReader API");
                }
            }

            function save_profile_image(image_data){
            var image_code = image_data;
            $.ajax({
                type: "POST", 
                url: '<?=base_url()."Dashboard/new_valet_picture";?>',
                data:'valet_image='+image_code,
                success: function(data){
                    alert('data');
                }
            });
        }

通过ajax上传时图像错误

2 个答案: