草庐IT

javascript - 从输入表单中获取 Base64 编码文件数据

coder 2023-07-03 原文

我有一个基本的 HTML 表单，我可以从中获取一些我正在 Firebug 中检查的信息。

我唯一的问题是，我正在尝试对文件数据进行base64 编码，然后再将其发送到需要以该格式保存到的服务器数据库。

<input type="file" id="fileupload" />

在 Javascript+jQuery 中:

var file = $('#fileupload').attr("files")[0];

我有一些基于可用 javascript 的操作:.getAsBinary()、.getAsText()、.getAsTextURL

但是这些都不会返回可以插入的可用文本，因为它们包含不可用的“字符” - 我不想在我上传的文件中出现“回发”，我需要有多个针对特定对象的表单，因此获取文件并以这种方式使用 Javascript 很重要。

我应该如何以可以使用一种广泛使用的 Javascript base64 编码器的方式获取文件!？

谢谢

更新 - 从这里开始赏金，需要跨浏览器支持!!!

这是我所在的位置:

<input type="file" id="fileuploadform" />

<script type="text/javascript">
var uploadformid = 'fileuploadform';
var uploadform = document.getElementById(uploadformid);


/* method to fetch and encode specific file here based on different browsers */

</script>

跨浏览器支持的几个问题:

var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only would works in Firefox

此外，IE 不支持:

var file = $j(fileUpload.toString()).attr('files')[0];

所以我必须替换为:

var element = 'id';
var element = document.getElementById(id);

IE 支持。

这在 Firefox、Chrome 和 Safari 中有效(但没有正确编码文件，或者至少在文件发布后文件没有正确显示)

var file = $j(fileUpload.toString()).attr('files')[0];
var encoded = Btoa(file);

此外，

file.readAsArrayBuffer()

好像只有 HTML5 支持？

很多人建议: http://www.webtoolkit.info/javascript-base64.html

但这只会在 base64 编码之前返回 UTF_8 方法的错误？ (或空字符串)

var encoded = Base64.encode(file);

最佳答案

这在浏览器端的 javascript 中是完全可能的。

简单的方法:

readAsDataURL()方法可能已经为您将其编码为 base64。您可能需要删除开头部分(直到第一个 ,)，但这不是什么大问题。不过，这会带走所有的乐趣。

困难的方法:

如果您想尝试一下(或者它不起作用)，请查看 readAsArrayBuffer()。这将为您提供一个 Uint8Array，您可以使用指定的方法。这可能仅在您想弄乱数据本身时才有用，例如在上传之前操纵图像数据或执行其他巫术。

有两种方法:

  • 转换为字符串并使用内置的 btoa 或类似的
    • 我没有测试所有情况，但对我有用 - 只需获取字符代码
  • 直接从 Uint8Array 转换为 base64

我最近实现了 tar in the browser .作为该过程的一部分，我制作了自己的直接 Uint8Array->base64 实现。我认为您不需要它，但它是 here如果你想看一看；非常整洁。

我现在做什么:

从 Uint8Array 转换为字符串的代码非常简单(其中 buf 是 Uint8Array):

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

从那里，只需做:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 现在将是一个 base64 编码的字符串，它应该只上传 peachy。如果你想在推送之前仔细检查，试试这个:

window.open("data:application/octet-stream;base64,"+ base64);

这会将其下载为文件。

其他信息:

要获取 Uint8Array 形式的数据，请查看 MDN 文档:

关于javascript - 从输入表单中获取 Base64 编码文件数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6978156/

javascriptBasecodestrongprehtmlfile-uploadbase64

有关javascript - 从输入表单中获取 Base64 编码文件数据的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  4. ruby - 用逗号、双引号和编码解析 csv - 2

    我正在使用ruby​​1.9解析以下带有MacRoman字符的csv文件#encoding:ISO-8859-1#csv_parse.csvName,main-dialogue"Marceu","Giveittohimóhe,hiswife."我做了以下解析。require'csv'input_string=File.read("../csv_parse.rb").force_encoding("ISO-8859-1").encode("UTF-8")#=>"Name,main-dialogue\r\n\"Marceu\",\"Giveittohim\x97he,hiswife.\"\

  5. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  6. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  7. ruby - 从 Ruby 中的主机名获取 IP 地址 - 2

    我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge

  8. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

  9. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器，并将RVM安装的ruby​​实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径？谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el

  10. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

随机推荐