Heim  >  Artikel  >  Backend-Entwicklung  >  php如何获取ajax提交过来的经过base64处理后的图片

php如何获取ajax提交过来的经过base64处理后的图片

WBOY
WBOYOriginal
2016-08-18 09:16:162571Durchsuche

<code> 

    function onSelectPhoto(files) {
                    file_obj = files[0];
                    if (use_general_upload) {
                        return;
                    }
                    var filesize = file_obj.size  5242880;
                    var allow_type = '|.jpg|jpeg|.png|.gif|';
                    var ext_name = '|' + file_obj.name.toLowerCase().substr(file_obj.name.length - 4) + '|';
                    var filetype = (allow_type.indexOf(ext_name) == -1 && file_obj.name.indexOf(".") > 0);
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        if (e.target.result.substr(0, 11) == 'data:base64') {
                            $("#preview_img").attr('src',
                                    "data:application/octet-stream;"
                                    + e.target.result.substr(e.target.result.indexOf("base64,")));
                        } else {
                            $("#preview_img").attr('src', e.target.result);
                        }
                    }
                    if (filesize) {
                        file_obj = false;
                        showTextTime("您选择的文件大于5MB,请选择小于5MB的照片", 3000);
                        return false;
                    }
                    if (filetype) {
                        file_obj = false;
                        showTextTime("您选择的文件格式有误,应为JPG、PNG或GIF类型的文件", 3000);
                        return false;
                    }
                    file_name = file_obj.name;
                    reader.readAsDataURL(file_obj);  //
    //                alert(reader);
                }</code>
<code>图片上传处理代码
</code>
<code>  function upload_photo() {
                if (file_obj == false) {
                    showTextTime("请先从手机中选取要上传的照片", 2000);
                    return false;
                }
                if (uploading) {
                    showTextTime("照片正在上传中,请稍候...", 2000);
                    return false;
                }
                uploading = true;
                showLoading(loading_src, "照片上传中...", 0);
                if (use_general_upload) {
                    document.forms[0].submit();
                } else {
                    var ui = $("#upload_ifr");
                    var ui = ui[0];
                    ui.contentWindow.upload_photo();
                }
                return false;
            }
       </code>
<code>function upload_photo() {
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                xhr.onreadystatechange = function(e) {
                    window.top.callbackHandler(e, xhr);
                };
                xhr.upload.onprogress=function(e){
                    if(e.lengthComputable){
                        var percent =(e.loaded / e.total *100|0)+"%";
                    }
                }
                var formData = new FormData();
                formData.append('files', window.top.file_obj);
//                                alert(formData);
                xhr.open("POST", 'upload_file.php', true);
                xhr.send(formData);
            }
        }
</code>

这里我应该怎么在upload_file.php获取到传递过来的formData

回复内容:

<code> 

    function onSelectPhoto(files) {
                    file_obj = files[0];
                    if (use_general_upload) {
                        return;
                    }
                    var filesize = file_obj.size  5242880;
                    var allow_type = '|.jpg|jpeg|.png|.gif|';
                    var ext_name = '|' + file_obj.name.toLowerCase().substr(file_obj.name.length - 4) + '|';
                    var filetype = (allow_type.indexOf(ext_name) == -1 && file_obj.name.indexOf(".") > 0);
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        if (e.target.result.substr(0, 11) == 'data:base64') {
                            $("#preview_img").attr('src',
                                    "data:application/octet-stream;"
                                    + e.target.result.substr(e.target.result.indexOf("base64,")));
                        } else {
                            $("#preview_img").attr('src', e.target.result);
                        }
                    }
                    if (filesize) {
                        file_obj = false;
                        showTextTime("您选择的文件大于5MB,请选择小于5MB的照片", 3000);
                        return false;
                    }
                    if (filetype) {
                        file_obj = false;
                        showTextTime("您选择的文件格式有误,应为JPG、PNG或GIF类型的文件", 3000);
                        return false;
                    }
                    file_name = file_obj.name;
                    reader.readAsDataURL(file_obj);  //
    //                alert(reader);
                }</code>
<code>图片上传处理代码
</code>
<code>  function upload_photo() {
                if (file_obj == false) {
                    showTextTime("请先从手机中选取要上传的照片", 2000);
                    return false;
                }
                if (uploading) {
                    showTextTime("照片正在上传中,请稍候...", 2000);
                    return false;
                }
                uploading = true;
                showLoading(loading_src, "照片上传中...", 0);
                if (use_general_upload) {
                    document.forms[0].submit();
                } else {
                    var ui = $("#upload_ifr");
                    var ui = ui[0];
                    ui.contentWindow.upload_photo();
                }
                return false;
            }
       </code>
<code>function upload_photo() {
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                xhr.onreadystatechange = function(e) {
                    window.top.callbackHandler(e, xhr);
                };
                xhr.upload.onprogress=function(e){
                    if(e.lengthComputable){
                        var percent =(e.loaded / e.total *100|0)+"%";
                    }
                }
                var formData = new FormData();
                formData.append('files', window.top.file_obj);
//                                alert(formData);
                xhr.open("POST", 'upload_file.php', true);
                xhr.send(formData);
            }
        }
</code>

这里我应该怎么在upload_file.php获取到传递过来的formData

`

<code>$smeta = $_POST['smeta']; 
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $smeta, $result)) {//base64上传
    $data = base64_decode(str_replace($result[1], '', $smeta));
    $dataname = './Uploads/' . uniqid() . '.' . $result[2];
    if (file_put_contents($dataname, $data)) {
        $this->ajaxoutput($dataname); //返回数据结构自行封装
    }else{
         $this->ajaxerror('上传出错');
    }</code>

}`

base64_decode()

为什么不直接上传图片,这样做费力不讨好. 如果用base64提交,可以把他当字符串post, 后台从$_POST里取出就好了.

先正则提取图片后缀和数据流,再对数据流进行base64_decode

<code>private function decodeFile($base64_url)
    {
        preg_match('/^data:image\/(\w+);base64/', $base64_url, $out);

        $type       = $out[1];
        $type_param = 'data:image/' . $type . ';base64,';
        $fileStream = str_replace($type_param, '', $base64_url);    
        $fileStream = base64_decode($fileStream);

        return array(
            'type'       => $type,
            'fileStream' => $fileStream
        );

    }</code>

<code>   public function base64img()
        {
            if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $_POST['pic'], $result))
            {
                $new_file = "Uploads/Picture/" . uniqid() . '.png';
                
                file_put_contents($new_file, base64_decode(str_replace($result[1], '', $_POST['pic'])));
                
                return $new_file;
            }
        }</code>
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn