java异步上传截取图片_如何将base64图片转换为图像文件，并使用jQuery异步形式上传图片...

当我们把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 

var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);

for (var i = 0; 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放在

标签内部，后面会给出理由，代码如下：

下面是调用前面定义的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.");

}

});

完整的代码请看下方：html>

Base64 string to a file in form

function b64toBlob(b64Data, contentType, sliceSize) {

contentType = contentType || '';

sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);

var byteArrays = [];

for (var offset = 0; offset 

var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);

for (var i = 0; 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.");

}

});

}

下面来看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