简体   繁体   English

如何使用输入类型文件对上传的文件进行编码和解码

[英]How to encode and decode the uploaded file using input type file

I have created multiple file upload option for user. 我为用户创建了多个文件上传选项。 I want to encode and decode the uploaded file... Here i write the program for convert the image to base64 string... How to encode as well as decode the file using base64. 我想对上传的文件进行编码和解码...在这里我编写用于将图像转换为base64字符串的程序...如何编码以及使用base64解码文件。

My Code is 我的代码是

<html>
<body>

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" multiple />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " +          document.getElementById("imgTest").innerHTML);
        var reslut =    document.getElementById("imgTest").innerHTML; 
        console.log("Converted Base64 version is " +reslut);

      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>
</body>
</html>

In console i print the encoded value of file... How to use console output for decode purpose. 在控制台中我打印文件的编码值...如何使用控制台输出进行解码。

尝试window.atob(base64string) ,我认为它是一个blob对象的utf8字符串

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 这可以动态编码/解码上传的文件吗? - Is this possible to encode/decode uploaded file on the fly? 如何删除未选择的文件,并在输入类型文件中使用jquery成功上传文件名 - how to remove no file selected and place the file name which is uploaded successfully using jquery in input type file 如何从文件中读取内容,使用“输入类型” = HTML中的文件上传 - How to read content from a file , uploaded using “Input Type” = file in HTML jQuery抓取一个用input type ='file'上传的文件 - jQuery grab a file uploaded with input type='file' 尝试将使用输入类型文件上传的文件移动到div - trying to move the files uploaded using input type file to div 将上载的文件从一种“文件”类型输入重新分配给另一种 - Reassign the uploaded file from one “file” type input to another 如何将base64解码为vue.js中输入类型文件的文件格式? - how to decode base64 into file format as in input type file in vue.js? bootstrap4输入文件上传不会在输入中显示上传的文件名? 如何解决使用角度 - bootstrap4 input file upload won't show uploaded file name in input ?? how to solve using angular 使用Java脚本验证上传的文件类型 - Validate uploaded file type using Java script 编码服务器上文件的路径并在客户端上解码 - Encode path to file on server and decode on client
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM