我会将图像转换为字符串并将其从 ajax 发送到服务器，然后当我想从服务器获取它时，我会将其转换为文件而不是将其转换为图像 url，因此我进行了以下测试，但这是行不通的。所以我需要你的帮助<html> <head></head> <body> <input type="file"/>Please input a "png" image for test<br> <img src=""/> <hr> <button state="working">Working</button> <button state="notworking">Not Working</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $.FileToString = async (File, callback) => { const reader = new FileReader() reader.onload = async () => { callback(await reader.result) } reader.readAsText(File) } $.StringToFile = (String, type)=>{ return new Blob([String],{type:type}) } $.FileToUrl = async (File,callback)=>{ const reader = new FileReader() reader.onload = async ()=>{ callback(await reader.result) } reader.readAsDataURL(File) } </script> <script> $("button[state='notworking']").on("click",()=>{ $.FileToString($("input[type='file']")[0].files[0],(string)=>{ $.FileToUrl($.StringToFile(String,"image/png"),(a)=>($("img")[0].src = a)) }) }) $("button[state='working']").on("click",()=>{ $.FileToUrl($("input[type='file']")[0].files[0],a=>($("img")[0].src = a)) }) </script> </body></html>
1 回答
天涯尽头无女友
TA贡献1831条经验 获得超9个赞
您应该使用数组缓冲区作为中介
<html>
<head></head>
<body>
<input type="file"/>Please input a "png" image for test<br>
<img src=""/>
<hr>
<button state="working">Working</button>
<button state="notworking">now works</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.FileToArrayBuffer = (File, callback) => {
const reader = new FileReader();
reader.onload = async () => {
callback(await reader.result);
}
reader.readAsArrayBuffer(File)
}
$.ArrayBufferToString = (ArrayBuffer, callback)=>{
btoa(new Uint8Array(blob).reduce(async (data,byte)=>{
callback(await (data + String.fromCharCode(byte)));
}));
}
$.StringToArrayBuffer = (String)=>{
var enc = TextEncoder();
return enc.encode(String);
}
$.ArrayBufferToFile = (ArrayBuffer)=>{
return new Blob([ArrayBuffer])
}
$.FileToUrl = (File,callback)=>{
const reader = new FileReader();
reader.onload = async ()=>{
callback(await reader.result);
}
reader.readAsDataURL(File);
}
</script>
<script>
$("button[state='notworking']").on("click",()=>{
$.FileToArrayBuffer($("input[type='file']")[0].files[0],(arraybuffer)=>{
$.FileToUrl($.ArrayBufferToFile(arraybuffer,"image/png"),(a)=>($("img")[0].src = a))
})
})
$("button[state='working']").on("click",()=>{
$.FileToUrl($("input[type='file']")[0].files[0],a=>($("img")[0].src = a))
})
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消