当前位置：网站首页>The most detailed conversion of Base64, blob and file
The most detailed conversion of Base64, blob and file
2022-07-22 17:07:00 【No overtime at the front end】
Base64、Blob、File Of API
Base64
Base64 Is a similar set of binary to text （binary-to-text） The coding rules of , So that binary data is interpreted as radix-64 After the form of expression can be used ASCII The format of the string is expressed .Base64 This word comes from a kind of MIME Data transmission code .
Blob
Blob Object represents an immutable 、 Class file object of original data .Blob Not necessarily JavaScript Data in native format .File Interface based on Blob, Inherited blob And extend it to support files on the user's system .
File
File The interface provides information about the file , And allow JavaScript Access its content .
Usually , File Objects are from users in a Element is returned after selecting a file FileList object , It can also be generated by free drag and drop operations DataTransfer object , Or from HTMLCanvasElement Upper mozGetAsFile() API. stay Gecko in , Privileged code can create File object , Without user interaction （ For more information , Please refer to precautions .
File Objects are special types of Blob, And can be used in any Blob Type of context in . for instance , FileReader, URL.createObjectURL(), createImageBitmap(), And XMLHttpRequest.send() Can handle Blob and File.
1、File turn Base64
Main application scenarios ： Preview picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file" multiple></br>
<button id="fileTobase">File turn Base64</button><br>
<img id="img" src="" alt="">
<script>
// Document type to base64
const fileToBase64 = (file, callback) => {
const reader = new FileReader();
reader.onload = function(evt) {
if(typeof callback === 'function') {
callback(evt.target.result)
} else {
console.log(" I am a base64:", evt.target.result);
}
};
reader.readAsDataURL(file);
};
$("#fileTobase").click(function (e) {
e.preventDefault();
// Get file object
const _file = $("#file")[0].files[0];
const base64 = fileToBase64(_file, base64 => {
console.log(' I am a base64:', base64);
// The preview image
$("#img").attr({
"src": base64})
});
});
</script>
</body>
</html>
2、File turn Blob
Main application scenarios ： Upload files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File turn Blob</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file"></br>
<button id="fileToBlob">File turn Blob</button><br>
<script>
// Document type to Blob
const fileToBlob = (file, callback) => {
const type = file.type;
const reader = new FileReader();
reader.onload = function(evt) {
const blob = new Blob([evt.target.result], {
type});
if(typeof callback === 'function') {
callback(blob)
} else {
console.log(" I am a blob:", blob);
}
};
reader.readAsDataURL(file);
};
$("#fileToBlob").click(function (e) {
e.preventDefault();
// Get file object
const _file = $("#file")[0].files[0];
fileToBlob(_file, blob => {
console.log(' I am a blob:', blob);
});
});
</script>
</body>
</html>
3、Base64 turn File
Main application scenarios ： Upload files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64 turn File</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<img id="img" src="" alt="" srcset="">
<br>
<input style="display: none;" type="text" name="base64" id="base64" value="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABkAGQDAREAAhEBAxEB/8QAHQAAAQQDAQEAAAAAAAAAAAAAAAEEBQcCBggDCf/EAEUQAAEDAwMBBQMHBwoHAAAAAAECAwQFBhEAEiEHCBMUMUEiUWEVMkJScYGRCRYjcoSh0RckM1RjkrHBwsM2VmJzgqKz/8QAHAEAAQQDAQAAAAAAAAAAAAAAAAIEBQYBAwcI/8QAPxEAAQMCAwQHBwIDBwUAAAAAAQACAwQRBSExBhJBURMiYXGBkaEUFTJCsdHwUsFTkqIHFkNicoKyJERU4fH/2gAMAwEAAhEDEQA/AJFXHrrkJK9yACyTWLosOSNF0WHJGi6LDkjRdFhyRouiw5I0XRYckaLosOSNF0WHJGi6LDkjRdFhyRouiw5JRnnnSw4haXgXSa1rejQhGhCmoVlV6oR2pEekSnGHU723NoSFp94yRkfHTxlHUSDeYwkKBqMfwulkMM1Q0OGRF9E6jdN7nluONs0SWtaEpVtAHtA7sbOfb4QskJzgJUTgA6WKCqNx0ZyWh+0uDsa1zqltnXA8Nb8vFN12RXA800zTnJ6nQpSDTlJlpO3G4bmioZG5ORnI3D3jSX0VQw7pYb+f0S6faHCqmMyx1DbA2Nzu66a2XhOtarUymifLguRYxeLH6bCFhftDBQfaAyhYBIwSlQ9DrW+mmjZ0j22GieQYtQ1NQaSCUOfbesM8ud9PVRWNNlLJcH3aEJNCEaEI0ISp9ft0oLTJqk0lbkaEI0IVz2khirW9SmBUo9biQlxVTIUqEZKRvJAS/kJKGI5HeBAVtV3KitYCm0C70Lw6JrQ/eta9+HZ4LzVtXTVAxB8z4ejDnENI+b/N3nLlrkNSpLwNK6n2bBfYrVWcYiSJZXJ8D4lthbzIYKUpJDqUAP8AebUhR9lwkqwDp3C6OeO7HE58fzRQmL0lVh9Q2Ooiaw7o+HQi+p4Xyt5KTmVCJS7YbiuQ6dH8QIsbwMwxnQGGWgXEbX1JbW6FLAUVbS2WwAk7cq3OkYwWJA8QoyOhqp94xRudbP4TxvY5BR1zrptvW/Kq9bgzk+PQYxp851D6YvdIbaiNojhfcnavxEhIRhPdkjIS4M6KmSGOMvlzB4fTL1UtgNHiFTWtjoHlj7HrC4y43PkO/uWjLvyw1KKk2csIKwrutieEADe1u35y4cqDmMs52pChzqCNVQfwfp+fZdYGCbT3v7wHD804cvm1KT897GU2sfmusOlLgS8YrfsrUf0TmzvMEND2S3nD3zlFJ40n2mh/g/nP81Wfcm0+6B7eNDz+3Hnq3QLSKtLiTqtNfgRTChOPKUzHJz3aCeE6hZt1zy5gsOAXRaFk0NNHHUv33gAE8zzTXWiyfXRosi6VPmft1kLVJqk0lbkaEI0ISLG9Kk5IBGDg+Y9x+GlBxboUhzGv+IXWKWu7ILalNKT5KQogj7xrIe4G4KS6JjxuuFwpSmWiwudDgOx6hUKzOaEiNb9DiCTUHmT5PLCiluOyfRx1Qz5hKhzqZp6CScgu8uNufILneMbXUuGOdDTDfc3Im9mg8rjMkcQPNbs70TuWJT/EvdNH0Ap3Bo3ez477AlUUMk49N/8A5anfcpcPh/qz+llz0bf1jZL3ZbluG3ne60idS2WmZEiEuUpqLI8JNiT4/h5tPfI3BqQ1khJUkFSFpKkLAJSeCBW6ujdTm4007R3j8C6xgO0kGMjoyN2QC9r3BHNp49o1Cj8ajVcUaEI0IRoQlT5n7dYC1yapzCbhNsTqjVZC4lGprBlzXmU73O7CkpCG0/ScWtSEJH1ljPAOnVNB077HQaqExzFm4PSGa13HJo4E9vYNT2LBE2JWaEiqMUqXQHm6jIpcqmTJSZKmnWm2nAoOJSnIUh5OQRwUnBII06raRtPYsuNQQc7FQOy2Pz4x0kdTYloBBAtcG40z0IXhqJV/RoQncaZFoVNqdwz4pnwqQyHhCHnNkLUERow9/eOlIIHO0L92pKggEsm88XDfXkPP0VP2oxR2G0W7EbSSdVp5c3eA9bLtvs3dHHellmuTa4tM++rhc+UriqRA3OyVc90k+jbQOxKRwME4510Onh6Juep1Xleqn6Z/V+EZD85lVZV/yivTCJ1Beth6JU5NJblGE9XktNqiBYVtK9u7epoHOVgeQyARzpqcRhbL0frwToYVO6LpMtL24pr2krKjUXqFadSi7Q1cfe2zKCefEIdacehEn1U1JaTtPnhwjyOlYjEJWh3E3b6XHqn2AVr6GpbI0/AQ7wvZw8QVzy9ElQHAxOivQpQAKmJLSm1p+1KgDrnDmOYbOFl63hniqWdJC4ObzBuPRYaQt6NCEaEJU+Z+3WAtcmqKw73XTe93OSqNCiTQB/Y1CKs/uzqWw4jeeDyB8iFzzbmPeo4Hf57ebXL2eUHF3qyPZTGuODLT8RJp6kk/jGGpfGGjr94PmFSv7P5d2rDObD6O/wDa8NVBd+RoQrB6TWqi8OqnTC3HUByIiTLvOotkcLbifzeED9j63FY1bcJhBDLjW58sh+68/beVpfWPjByY0NHe7rO9LBd/kYHv1c1xtfOYfk411/rLX4MG62G7MgTG1yNzKjNQl0d94ZP0CoNqSO8JHC0naTkarpwzelNj1fVWf3ruwAFvWt4d66I7V1sUq9bi6L2HLjeIiVS5UuPxdyhuiRo7rjg3AgjjAyCDzqTqGh4jjPE/QFRNI4x9JKNQPUkJLt7I8um08iwLokMxkDKbYu1a6rSlj6qFrPiIxP121nHu1rloWvB3fI5j7hPaLGZ6OQSMJa7m3I+I0PcQudaza0qLXX6JIpEu27rYbU+5bc5wPKfaT85+A+AEy2h5kDDiPpJOCdVGqw8x/AM+X2PH6rueA7ZxVe7DXkAnIPGQJ5OHyn+k9i1sEEZByNQa6kjQhKPM/brAWt+qZXvUF0Xo/esxhhMiRKaj0chw+w01JWre7j6SgWUpSPIFeecAalKEWbI8a5DwOv0XOdtpniOnpx8LnEk8eqMvqb9yc02e3U27jkI4VPolBq+P1HnWVf8A3TqexLrxF3MNP7LnexjzDicbDze30v8Ass9U4r0cgnAzoQuieybS0yOtt6ylJyaJa9BpbJI+YH0OSnQPtWoE6v2Fst4NH3Xk/aiczVkzjxkf6HdH0XXC/Lzx6an1TFonR0/KNBqlfJSs12rS56HE/TZDncxzn4sMtH79a2Zgnmt0wsQ3kAq0q1bZuftyUCjEpWLYtGVPASCopekvNt5PonDaeM+e/TcuBqQ3kD6lOQ0tpC/m4DyCuG9+olG6eihGsuuMIrNVYo0VaGytIkPbu7CyPmpJTjceMke/Th72stvcTZNGRukvu8BdMuqnSagdX7b+Sa2y4hxpYkQajFX3UunyB8x9hwcoWk+o4PkQRxrEkTZW2clRSuhdvN/+964fvq1qvb9frFHuNLQu2kMplyZUdrumK1AUrYipNIHCFhWEPtjhKyFDhR1ScRoiwl4GY17Rz7+fmu97G7R9IG0FQ64OTCdQf0E/8T4LW7irgsxFWDNvU2sxrdjxn689UXX0uqdd2rVFjFtaUtqaaWkqWsKO84xjjUnRYKZaKWpLQRGATe+p4DuCgcb2zqxiTaellLGucQ0AA33ct51wbgnQDgva46c3Q7jq1MQ6XkQ5TjCXCMFSUngn44xqqSwCORzORXacOrTXUUNVoXtBPedVF19oSumd9slPed3TWZwQfUsTGFk/3Cv7s6cUBze3mPoVU9to70kEo+V9v5mkfZQ3TymVanW05Va29So1Let+VQYfdzB4p12PUWy2lTB9onLShvTlIBBODwZqYufATJkA0geByXNNnon+9InwtJ6wJ5C7SDn4qdaQp4pS2hS1K8kpSST9w1VQ0k2C9Fue2MXebDtTo0WorSQKdN5H9Wc/hrJjk/SfIpsK2l/it/mH3XR3ZKf8N1h6qxnUKadk0u2pqEOJKVbPAqbPB9ykEa6DhvzDsb9F5Q2hH/UvINxvyf8AK/7qr+3z2rbktS5adZ9hXEqktMsuOVadTyA+l8ObQwVkfo8BO445O4c4HOqvq3xkMiNua04bRxyAySi/JWx+T16pV7qX0PcarYQ8KFN+SocxtsIDzCWm1JSdvBUjdtJHmAM85Jd4fM6aLrcMkzxKFkM3U45qI7IlVa6kdduvPUcLQ7CeqTFHgSQeDHYCucnyBSGlffpNI7pZpZPBLrG9FBDDxsSfFb12zpDMrs61+sQHWpUihS4FWaW2oK2LYltLzkeXG77s6c1dxCXDhn5FNaI2na08bjzCuC0LqbuinqeDYadQRvQDkYIyCPgf8tOwbi6ZvaWGxVPdsSjt02xKd1FYjJkVKyZiJy2tmfFU91QZmxlf9K2lknPqgHTGsbaPpLX3fpxCf0DyJdwG29oeR4HzXHwp71xdLaXBlr3Vi/q0yuS6E8lUuUHnFH4IZSfuTq1zMFFs22M/FMRf/cb+gCjI3GpxtzhpEDbwFvUlZVCsfnHWqxVkp2tzpz8lAz9BSyU/+uNcVqJN6Z7hxK9j4RAaSghgPytA9E7LbjdsymYrEeTU7icdtmGma+WYzJeiuqeeeUAT7LaSEJ+ks+u0glO5tNC+pcL2ysO78sqdtlWPcIsOYMndcn/SRYDx17O9MLP6ZdU7FlQDTbloyaWzJMiVSH6/KdhT939Il1tSMYX9Ijn92m394YhpG63EWuCua+wvvvhwDuBGRB8FO1m3uoTsJqHQ3rTtNjvg7LXSLjmoflpSkhDSniN6EAqKtqSNxxnOBpDMdpo8o4XN565qTr5K3FC01kodu6CwAz1NuJUCbC6jfSuOAT7zflUH+vTobRwHWN3mfuoM4W79Y/lCl+lrHVXpR1Kcu6NWrXranYKqc5Bq1xvPbmCoLSnvlJKzsWCU5zgKUPI6XDtC2KUyNjdnwsUTYW2aLoy4Djl9leLvae6iyW+6m2j09lo+khV0qx+CmDp+NqYz8UTvIqN9wgaSKu+ofX+4rQ6eXm9b9iWPZsuqRQ3MqtvV9pySATsLiWQyjvHQla9vOQSDzjGtkW0MUx6KOIgnsSjg5a4OfJvAcFYfZcteDaHSDqJDoaHUUtF6S4zSXTucEdpLLad59T7OT8TqzULQ1jt3mVCVzy+RhdruhS/VWIqX0L6pNFJLBtuWVj03BBKc/HIOnVRnC/uP0WmA2mj/ANQVx9Dqapvp9Rqo46HHKnT4j5CfJI7lJ/HJOtkV9wX5BNZzeRw7Std7Xtbi0Ts3dQFSTzJpL0RpI5KnHAG0D+8tI+/SKk2geTyK20YvUR94XC7NZmuNKly6VOob1txEW5AgT2S0+moyIwEl9SD80NRspT65fSrjTfGcZ9rhiY0FrY2hovqXWzPgNFbNlcC6XELucHbx3zbTdByHide5e1PjJjRG2kjASAANc3JuSvUm4GgBOvHqZpc2G5Dp9TgyNi3YVViIlMKWgkoXsVxuTk4I59oj11tgqHQEgaFROKYLTYsxonvvNvYg2Of7KTtToRZtwXN1CQ/RobbcC5pUWOy3HTtaZ2NrQhOfIDecDUZjdXLR1ZZFkDmuJUAD4B0guRln2LaB2ZrBHnRYx/Z2/wCGq/71qf1KR6OP9ISHszWF6UWMP2Zs/wCnWPelSfmWNyMaNCxV2ZrGI9mkQx9sNo/5aWMSqBxWN1n6QkHZmsgHmkwj+wtfw0e85+aN2P8ASq3uLorbtOuu5+4t5mp0Wgmh1Co06I0lqW/DUqUZKY5QArdtSlagghSkNHnjV6wMmqpzNLnY+iruIv3JgxnVuD3Xy1/OK6z7DVRtufZ3USnWw7GlW3FvCd8ndwSpsw3W2nGsbucYJHPPBzzq80JZuOazQFU7EGva5hkGZaFvHak8DbnZp6kONtNRGl0aQ3htISCtaChP4lQGnNSbQv7imtIN6ojHaFUli9sulWpZFv0VVmXpKdp1PjxVuIt93ClIbSkke15ZBxpzHFPugdBJoPkPJYkYwvcelZa5+YKvupnaGl9Yr2ocObZN5s2RTpDdReYao2X6lJaUFMMKQpaUoYSvC1EqJWUgeyNaJ6atmIY2mfujP4TmU5gdSwMLzOwvOQ62gOviq9nV03fT6bXlNraVcNTq9xONu43oL0ssNpOPqtRkDjjzxqj4jISATxJPrZd12Fpg0TPPDdb5C/1KRPrqBXV36rBwbmlj3gj92kFbxqFbfT5xJvTqIkcKeqECeQP7emx1E/iDphtIAaljhxaF53px0bpY+T3D+oreyMaqVk+ukxosspc/DWViyM/DQhUTesqQxeHUOREfdiymJlupZfZWULbWI0xYUlQ5BGddBwhxjw3fbrvfdbsHhjqMYEUrQ5pY64OY1CsXpZ1iX0qve6q9KZpMyy7gmomTqy3KV4umpEVtqMiRHSjLbSXG3ELd5BU6g5AOTeaKpZcuuLHU8RlxCoONYPVUb+jlYWkEhuWTszoeOXBRPWntQwe0V0jkWtb9vVyXWKgxFkSqRBp70hUciW1uZecSkbAtAUpDuNpHPB406mq45oN2O5J9M1D09K6nm6SQiw0N9cvutEveyqBbF13qmFHqFbp8F2jogx5Fxzw02iTHkLcUFodCl5UynGSQOcaZVNXJBvOEjiBb5ncb9qtGDYO3FahtM8Bhs4nqtvkRzHatVXBpTqgVWVDex/Wq7VXh94MkaiXYtIcnEnvc77roLNg4h/ieTWD9lIoVIlSEPyG48dLTLcaNFhtd0xGYQMIabRn2UgfEkkkkkknULUzundcroeEYVFhUHQx95J1J5lOE+umyl36pMZGkLcFN/nO9Qq/NrNKuel041SFT2JMKq0aXJU07GjhkqStlQG1QGf4Y5f1VJR4luOkeWkCy4nWYJilPVTOiiDmOc5w6w0JvxTn+Vm4Mezd9mn/uUGrJ/wAM6ZDAqE/4x/PBMjQ4uP8At/6h90g6t3IB/wAVWIr9al1hP+2dBwCi4T/nkkmjxYa0x82/dZjq5cv/ADL09P60WsJ/2TrHuCj/AI/55JPsuK/+MfNv3Sp6vXKDj5e6dL++rp/xj6wdn6U6VH55JPs+KcaV3p91rM6rLnOV2TNqlHqVVrdSgySzQhJUxHajRnmvaU+2g7lF0YAz5HOONSjYIqKk9nY/ezv9furFs3Q1gxL2ieIsAaRnbMkjkTySxJMqmy0S4Ex+BMQClMiM4ULAIwRkehHmPI6aRyPjdvMNl1GqpIK2MxVDA5p4EXU6a1IqluIZqlebqcxMtxbrd01Gp9wGihIR3QiHlWS4FBz0Kdvrqagq2vZaZ2fbf9ly3GsCrKapa/CIGhls7Bl7/wC7hpa3iotuqraqNSddqtgvQ5kenxhT1MVstMCGhxDSkqSkLJ2uqzuJHlre6WB43S4Wyy63BV6HDsep6k1cMbhIb3PUz3rXy04L1qs6mSo0IRDTlVABzxRo6JSYmMjutviT3m/G7d5J+bj11EVYhu0xeNr29V1DZ12LOZJ715jd+G/bfdy7uKjs/DTFXCyyT66SdVofqslIA9TocLFYDzZYFlKzyM6TdBffUJBGbPprN7rFxyCFRW/qj8BoJRccgkVEb+qPwGlbxWQRyCPAs/V0bxWLjkEqYjbZylODoJJQHW0Cy2/HSErfKRTSVjB5GgGyxvX1CxTFb+qPw0q5QSOSXuUoPsjGhAdbQJcaFnfKyT5a2gBIJ3s1/9k=">
<br>
<button id="base64ToFile">Base64 turn File</button><br>
<script>
$("#img").attr({
'src': $("#base64").val()})
// Base64 turn File
const base64ToFile = (base64, fileName) => {
let arr = base64.split(','), type = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, {
type});
};
$("#base64ToFile").click(function (e) {
e.preventDefault();
// obtain base64
const base64 = $("#base64").val();
console.log(" I am a base64:", base64);
const file = base64ToFile(base64, 'fileName');
console.log(" I am a file:", file);
});
</script>
</body>
</html>
4、Base64 turn Blob
Main application scenarios ： Upload files
// encapsulation
const base64ToBlob = function (base64Data) {
let arr = base64Data.split(','),
fileType = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
l = bstr.length,
u8Arr = new Uint8Array(l)
while (l--) {
u8Arr[l] = bstr.charCodeAt(l)
}
return new Blob([u8Arr], {
type: fileType
})
}
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base64 turn Blob</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<img id="img" src="" alt="" srcset="">
<br>
<input style="display: none;" type="text" name="base64" id="base64" value="data:image/jpeg;base64,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">
<br>
<button id="base64ToBlob">Base64 turn Blob</button><br>
<script>
$("#img").attr({
'src': $("#base64").val()})
// Base64 turn Blob
const base64ToBlob = base64 => {
let arr = base64.split(','), type = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type});
};
$("#base64ToBlob").click(function (e) {
e.preventDefault();
// obtain base64
const base64 = $("#base64").val();
console.log(" I am a base64:", base64);
const blob = base64ToBlob(base64);
console.log(" I am a Blob:", blob);
});
</script>
</body>
</html>
5、Blob turn File
Main application scenarios ： Upload files
// blob turn file
const blobToFile = function (newBlob, fileName) {
newBlob.lastModifiedDate = new Date()
newBlob.name = fileName
return newBlob
}
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob turn File</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file"></br>
<button id="fileToBlob">Blob turn File</button><br>
<script>
// Document type to Blob
const fileToBlob = (file, callback) => {
const type = file.type;
const reader = new FileReader();
reader.onload = function(evt) {
const blob = new Blob([evt.target.result], {
type});
if(typeof callback === 'function') {
callback(blob)
} else {
console.log(" I am a blob:", blob);
}
};
reader.readAsDataURL(file);
};
// Blob turn File
const blobToFile = (blob, fileName) => {
const file = new File([blob], fileName, {
type: blob.type});
return file;
}
$("#fileToBlob").click(function (e) {
e.preventDefault();
// Get file object
const _file = $("#file")[0].files[0];
fileToBlob(_file, blob => {
console.log(' I am a blob:', blob);
const file = blobToFile(blob, 'fileName');
console.log(' I am a file', file);
});
});
</script>
</body>
</html>
6、Blob turn base64
Main application scenarios ： Preview picture
export function blobToBase64 (blob, callback) {
var reader = new FileReader()
reader.onload = function () {
var dataUrl = reader.result
var base64 = dataUrl.split(',')[1]
callback(base64)
}
reader.readAsDataURL(blob)
};
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blob turn Base64</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file" id="file"></br>
<button id="blobToBase64">Blob turn Base64</button><br>
<script>
// Document type to Blob
const fileToBlob = (file, callback) => {
const type = file.type;
const reader = new FileReader();
reader.onload = function(evt) {
const blob = new Blob([evt.target.result], {
type});
if(typeof callback === 'function') {
callback(blob)
} else {
console.log(" I am a blob:", blob);
}
};
reader.readAsDataURL(file);
};
// Blob turn Base64
const blobToBase64 = (blob, callback) => {
let r = new FileReader();
r.onload = function (e) {
if (typeof callback === 'function') {
callback(e.target.result);
} else {
console.log(" I am a base64: ", e.target.result);
}
}
r.readAsDataURL(blob);
}
$("#blobToBase64").click(function (e) {
e.preventDefault();
// Get file object
const _file = $("#file")[0].files[0];
fileToBlob(_file, blob => {
console.log(' I am a blob:', blob);
blobToBase64(blob, base64 => {
console.log(" I am a base64: ", base64);
});
});
});
</script>
</body>
</html>
边栏推荐
- 视觉系统设计实例（halcon-winform）-8.匹配查找
- [MySQL] SQL tuning practice teaching
- Overview of basic principles of network
- numpy.ascontiguousarray
- QT warning: c4819: this file contains characters that cannot be represented in the current code page (936). Please save the file in Unicode format to prevent data loss
- Contract awarding and use of NPM private server
- [论文翻译] Generalized Radiograph Representation Learning via Cross-Supervision Between Images
- 进程与线程的区别
- 汉得企业级数字化PaaS平台 HZERO 1.9.0 版本正式发布！
- Qt5.9.2初次导入使用msvc2017_64编译器遇到的问题记录
猜你喜欢
Mecol Studio - harmonyos second assignment
使用OpenCV实现哈哈镜效果
汉得企业级PaaS平台HZERO即将重磅开源！
【Redis】分布式场景下Redis高可用部署方案
Hande enterprise PAAS platform hzero released version 1.5.0.release
Opencv supports H264 video coding
![[open hand] hande enterprise PAAS platform hzero heavy open source!](/img/98/195d070037325a844ac1b172fdab42.png)
[open hand] hande enterprise PAAS platform hzero heavy open source!
数据湖：数据湖技术架构演进
禅道管理员忘记密码找回密码
通过删除注册表破解plsql
随机推荐
UE4 创建一个工程
[论文翻译] Generalized Radiograph Representation Learning via Cross-Supervision Between Images
numpy.random.seed()
1840. 最高建筑高度 贪心
Cross domain problem (CORS) detailed description and solution
Hande x Jiuli special materials ｜ work together to create a collaborative office portal and help it internal standardized management
numpy.random.seed()
Upgrade MySQL 5.6 to 8.0 on Windows
codeforce D2. RGB Substring (hard version) 滑動窗口
mysql基础+mysql集群复习
tf.placeholder
Inventory of e-mail security incidents in China in the first half of 2022
codeforce D2. RGB Substring (hard version) 滑动窗口
MySQL query plan key_ How to calculate len
Concis component library | dark pattern design
LVS, this is enough
tf.reduce_sum()
Ora-16525 DG broker not available
[vs] trying to load a program with incorrect format
5分钟带你浅谈企业级PaaS平台HZERO！