最新消息:关注【已取消】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

如何将base64图片转换为图像文件,并使用jQuery异步形式上传图片

PHP语言 太平洋学习网 浏览 评论

当我们把base64图片上传到服务器时,您可能想到的是先将此文件作为base64图像字符串的形式传到服务器端,然后在服务器端将此其转换为一个图像文件,但是如果每个请求都这样做的话,无疑会极大的增加服务器端的工作。

因此在本文中,我们将学习如何将Base64字符串转换为Blob图像二进制的形式,然后使用jquery ajax异步上传到服务器中,此方法相当于用户做了一个Form表单提交了file文件输入框中的文件。

现在我们先开始将base64图片转换为图像文件Blob二进制流,使用javascript将base64图片转换为file文件的方式如下,该方法为自定义方法:

/**
    参数一:base64字符串数据
    参数二:base64文件类型
    参数三:处理字符串大小
*/
function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
}

我们使用一个Button按钮,使用Post异步请求提交Form表单,后面会有阻止Form表单直接提交的方法,之所以把Button放在<form>标签内部,后面会给出理由,代码如下:

<form id="myAwesomeForm" method="post" action="/php-code-that-handles-fileupload.php">
    <!-- 可以输入一个文件名之后提交 -->
    <input type="text" id="filename" name="filename" /> 
    <!-- Submit提交按钮 -->
    <input type="submit" id="submitButton" name="submitButton" /> 
</form>

下面是调用前面定义的b64toBlob()方法,将base64图片转化为图像文件的blob字节流,然后封装到javascript的FormData()对象中,并作为ajax的data数据提交到后台,代码如下:

// Get the form element withot jQuery
var form = document.getElementById("myAwesomeForm");

//base64图片,由于数据过多,后面部分已经省略
var ImageURL = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv....";

// 切割base64字符串,获取图片类型与图片实体数据
var block = ImageURL.split(";");
// 获取图片类型
var contentType = block[0].split(":")[1];// 图像类型 "image/gif"
// 获取base64图片内容实体
var realData = block[1].split(",")[1];// 图像数据实体部分 "R0lGODlhPQBEAPeoAJosM...."

// 转化成blob字节流用于上传
var blob = b64toBlob(realData, contentType);

// 创建FormData,将"image"作为后台的name参数,后台会用一个为"image" 的name变量来接收数据
var formDataToUpload = new FormData(form);
//将blob添加到name属性
formDataToUpload.append("image", blob);

现在FormData中有了一个文件,我们可以使用jquery ajax来异步提交该文件了,代码如下:

//为什么上面的form表单中有了一个action="xxx"了,此处url还要输入一个网址呢?请稍后看最后面就明白!!!
$.ajax({
    url:"/php-code-that-handles-fileupload.php",
    data: formDataToUpload,// Add as Data the Previously create formData
    type:"POST",
    contentType:false,
    processData:false,
    cache:false,
    dataType:"json", // Change this according to your response from the server.
    error:function(err){
        console.error(err);
    },
    success:function(data){
        console.log(data);
    },
    complete:function(){
        console.log("Request finished.");
    }
});

完整的代码请看下方:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Base64 string to a file in form</title>
    </head>
    <body>
        <form id="myAwesomeForm" method="post" action="endpoint.php">
            <input type="text" id="filename" name="filename" /> <!-- Filename -->
            <input type="submit" id="submitButton" name="submitButton" /> <!-- Submit -->
        </form>
        <script>
            function b64toBlob(b64Data, contentType, sliceSize) {
                contentType = contentType || '';
                sliceSize = sliceSize || 512;

                var byteCharacters = atob(b64Data);
                var byteArrays = [];

                for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                    var slice = byteCharacters.slice(offset, offset + sliceSize);

                    var byteNumbers = new Array(slice.length);
                    for (var i = 0; i < slice.length; i++) {
                        byteNumbers[i] = slice.charCodeAt(i);
                    }

                    var byteArray = new Uint8Array(byteNumbers);

                    byteArrays.push(byteArray);
                }

              var blob = new Blob(byteArrays, {type: contentType});
              return blob;
            }

            $("#myAwesomeForm").submit(function(e){
                //阻止Form表单直接被提交
                e.preventDefault();
                //然后使用ajax文件提交
                appendFileAndSubmit();
            });

            function appendFileAndSubmit(){
                // Get the form
                var form = document.getElementById("myAwesomeForm");

                var ImageURL = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv....";
                var block = ImageURL.split(";");
                // Get the content type
                var contentType = block[0].split(":")[1];// In this case "image/gif"
                // get the real base64 content of the file
                var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."

                // Convert to blob
                var blob = b64toBlob(realData, contentType);

                // 创建FormData对象并添加一个file文件
                var fd = new FormData(form);
                fd.append("image", blob);

                // Submit Form and upload file
                $.ajax({
                    url:"endpoint.php", //后台接收上传的文件
                    data: fd,  //提交formData字节流的数据
                    type:"POST",
                    contentType:false,
                    processData:false,
                    cache:false,
                    dataType:"json", 
                    error:function(err){
                        console.error(err);
                    },
                    success:function(data){
                        console.log(data);
                    },
                    complete:function(){
                        console.log("Request finished.");
                    }
                });
            }
        </script>
    </body>
</html>

下面来看php后台大概是如何接收的,如果是Java web项目大致也一样,就是使用(MultipartFile image)这个image属性来接收参数即可,先看看php后台服务器的大致写法吧!

<?php
// Important to use these statemenets, the json response is optional for our response.
use Symfony\Component\HttpFoundation\Request;

public function retrieveAction(Request $request){
   // retrieve the file with the name given in the form.
   // do var_dump($request->files->all()); if you need to know if the file is being uploaded.
   $file = $request->files->get('image');
   $nameInTextInput = $request->request->get("filename");
}

说明:项目的语言等可能和你用的不一样,但是思想是一致的,就是将base64图片转换为图像文件,然后使用form表单提交或者ajax提交即可。

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/php/814.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论