【如何将数据URI转换为文件然后追加到FormData()】数据URI是代表文件的base64编码的字符串(即, 你可以在网页中插入文件的内容, 而不是指定文件的URL)。当浏览器遇到URI时, 它将解码并构造原始文件。 DataURI最常在网络上用于图像。当网页需要另一个网页中的文件时, 该文件的URI可以由FormData对象方便地共享, 该对象可以将URI作为(键, 值)对, 并使用XMLHttpRequest发送它。
例子:
Input: 1. DataURI for a file.2. fileName. // To store the fileOutput: fileName - [ObjectFile]
程序:此过程可以分3个步骤完成。
- 第1步:如果是画布对象, 则将DataURI作为输入。可以直接将URI作为输入, 也可以使用功能canvas.toDataURL(type [optional], 图像质量的值从0到1 [optional])获得。
- 第2步:DataURI转换为Blob(二进制大对象-以二进制格式存储任何类型的数据, 例如图像, 音频和视频)对象文件。
- 第三步:Blob对象文件附加在FormData对象实例{key:value}中。
假设存在一个用于gif类型图像的DataURI。
输入如下:
图片的URI。
程序:
<
script type= "text/javascript" >
var inputURL = "" ;
var blobObject = blobCreationFromURL(inputURL);
// Create Blob file from URL
function blobCreationFromURL(inputURI) {var binaryVal;
// mime extension extraction
var inputMIME = inputURI.split( ', ' )[0].split( ':' )[1].split( ';
' )[0];
// Extract remaining part of URL and convert it to binary value
if (inputURI.split( ', ' )[0].indexOf( 'base64' ) >
= 0)
binaryVal = atob(inputURI.split( ', ' )[1]);
// Decoding of base64 encoded string
else
binaryVal = unescape(inputURI.split( ', ' )[1]);
// Computation of new string in which hexadecimal
// escape sequences are replaced by the character
// it represents// Store the bytes of the string to a typed array
var blobArray = [];
for ( var index = 0;
index <
binaryVal.length;
index++) {
blobArray.push(binaryVal.charCodeAt(index));
}return new Blob([blobArray], {
type: inputMIME
});
}var fdataobj = new FormData();
// Create formdata object and append the object
// file to the name 'Blob file'
fdataobj.append( "Blob File" , blobObject);
// FormData object content is displayed in alert box.
for ( var pair of fdataobj.entries()) {
alert( 'lsbin\n' + pair[0] + '–' + pair[1])
}
<
/script>
输出如下:
FormData对象的输出将在名称框中显示为名称和"对象文件"值对。可以使用JavaScript的FileReader对象读取对象文件, 该对象将读取对象文件, 并且可以使用任何JavaScript显示技术进行显示。
文章图片
推荐阅读
- 操作系统是什么(详细介绍和指南)
- 算法(拆分数组并将第一部分添加到末尾)
- 算法设计(如何反转给定大小的组中的数组())
- 对两个给定的字符串进行交织,没有共同的字符
- Node.js如何使用Buffer.writeUInt32LE()方法()
- 什么是标准访问列表(ACL)(详细指南)
- PHP convert_uudecode()函数用法详解
- 本文教你win7升级win10的办法
- 本文教你win7旗舰版忘记密码怎进入