获取Base64的途中从输入表单code文件的数据 [英] Get Base64 encode file-data from Input Form
问题描述
我已经有了一个基本的HTML表单，从中我能抢到一点是我在研究萤火虫的信息。
我唯一的问题是，我想为 的base64 的 EN code中的文件数据，然后再将其发送到它的要求在表单中的服务器被保存到数据库中。
＆LT;输入类型=文件ID =文件上传/＆GT;
和在Javascript + jQuery的：
var文件= $（'＃文件上传'）ATTR（文件）[0]。
我有一些运营基于JavaScript的avaliable： .getAsBinary（），.getAsText（），.getAsTextURL 的
但是没有这些返回一个可插入的，因为它们含有的无法使用字符的可用文字 - 我不希望有一个回传上传发生在我的文件，我需要有多种形式针对特定对象，所以重要的是我得到的文件，并使用JavaScript这样的。
我应该如何获取该文件以这样的方式，我可以使用JavaScript的base64之一EN codeRS被广泛avaliable！？
感谢
更新 - 在这里开始的赏金，需要跨浏览器的支持！
的这是我在哪里：的
＆LT;输入类型=文件ID =fileuploadform/＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
VAR uploadformid ='fileuploadform';
VAR uploadform =的document.getElementById（uploadformid）;
/ *方法来获取和EN code在这里根据不同的浏览器特定的文件* /＆LT; / SCRIPT＆GT;
与跨浏览器支持问题的夫妇：
var文件=附加$ J（fileUpload.toString（））ATTR（'文件'）[0]。
fileBody = file.getAsDataURL（）; //只适用于Firefox
此外，IE不支持：
var文件=附加$ J（fileUpload.toString（））ATTR（'文件'）[0]。
所以我有更换：
VAR元素='ID';
VAR元=的document.getElementById（id）的;
有关IE浏览器的支持。
这工作在火狐，Chrome，Safari浏览器（但不正确的连接code中的文件，或者它被张贴后至少该文件不出来的权利）
var文件=附加$ J（fileUpload.toString（））ATTR（'文件'）[0]。
变种EN codeD = BTOA（文件）;
此外，
file.readAsArrayBuffer（）
似乎在HTML5只支持？
的人地段提示：的 http://www.webtoolkit.info/javascript-base64.html
不过，这只是回报恩在UTF_8方法误差它采用base64 EN codeS之前？ （或空字符串）
变种EN codeD = Base64.en code（文件）;
这是完全可以在浏览器端的JavaScript。
最简单的办法：
借助 readAsDataURL（）方法可能已经连接code将其为base64为您服务。你可能需要剥离出来的东西开始（上升到第一位，），但是这根本不算什么。这将采取一切乐趣，虽然。
硬的方式：
如果你想尝试一下硬盘的方式（或者它不工作），看看 readAsArrayBuffer（）。这会给你一个Uint8Array，您可以使用指定的方法。如果你想与数据本身，如操纵图像数据或做其他巫术，然后再上传烂摊子这可能是唯一有用的。
有两种方法：
- 转换为字符串，并使用内置的
BTOA或类似- 我没有测试所有的情况下，却适用于我 - 刚刚得到的煤焦codeS
- 直接从Uint8Array转换为base64
我最近实施的的浏览器 焦油。作为这一过程的一部分，我做了我自己的直接Uint8Array->的base64实现。我不认为你需要的，但这里的如果你想看看;这是pretty整洁。
我现在要做什么：
在code从一个Uint8Array转换为字符串是pretty简单（其中buf是一个Uint8Array）：
函数uint8ToString（BUF）{
VAR我，长度，走出='';
对于（i = 0，长度= buf.length; I＆LT;长度;我+ = 1）{
OUT + = String.fromChar code（BUF [I]）;
}
返回的;
}
从那里，只是做：
VAR的base64 = BTOA（uint8ToString（yourUint8Array））;
Base64编码现在将一个base64恩codeD字符串，它应该只是上传桃色。如果要仔细检查试试这个前推：
window.open（数据：应用程序/八位字节流; BASE64，+ BASE64）;
这将下载一个文件。
其他信息：
要获取数据作为Uint8Array，看MDN文档：
I've got a basic HTML form from which I can grab a bit of information that I'm examining in Firebug.
My only issues is that I'm trying to base64 encode the file data before it's sent to the server where it's required to be in that form to be saved to the database.
<input type="file" id="fileupload" />
And in Javascript+jQuery:
var file = $('#fileupload').attr("files")[0];
I have some operations based on avaliable javascript: .getAsBinary(), .getAsText(), .getAsTextURL
However none of these return usable text that can be inserted as they contain unusable 'characters' - I don't want to have a 'postback' occur in my file uploaded, and I need to have multiple forms targeting specific objects so it's important I get the file and use Javascript this way.
How should I get the file in such a way that I can use one of the Javascript base64 encoders that are widely avaliable!?
Thanks
Update - Starting bounty here, need cross browser support!!!
Here is where I'm at:
<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>
Couple of issues with cross browser support:
var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only works in Firefox
Also, IE doesn't support:
var file = $j(fileUpload.toString()).attr('files')[0];
So I have to replace with:
var element = 'id';
var element = document.getElementById(id);
For IE Support.
This works in Firefox, Chrome, Safari (but doesn't properly encode the file, or at least after it's been posted the file doesn't come out right)
var file = $j(fileUpload.toString()).attr('files')[0];
var encoded = Btoa(file);
Also,
file.readAsArrayBuffer()
Seems to be only supported in HTML5?
Lots of people suggested: http://www.webtoolkit.info/javascript-base64.html
But this only returns en error on the UTF_8 method before it base64 encodes? (or an empty string)
var encoded = Base64.encode(file);
It's entirely possible in browser-side javascript.
The easy way:
The readAsDataURL() method might already encode it as base64 for you. You'll probably need to strip out the beginning stuff (up to the first ,), but that's no biggie. This would take all the fun out though.
The hard way:
If you want to try it the hard way (or it doesn't work), look at readAsArrayBuffer(). This will give you a Uint8Array and you can use the method specified. This is probably only useful if you want to mess with the data itself, such as manipulating image data or doing other voodoo magic before you upload.
There are two methods:
- Convert to string and use the built-in
btoaor similar- I haven't tested all cases, but works for me- just get the char-codes
- Convert directly from a Uint8Array to base64
I recently implemented tar in the browser. As part of that process, I made my own direct Uint8Array->base64 implementation. I don't think you'll need that, but it's here if you want to take a look; it's pretty neat.
What I do now:
The code for converting to string from a Uint8Array is pretty simple (where buf is a 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;
}
From there, just do:
var base64 = btoa(uint8ToString(yourUint8Array));
Base64 will now be a base64-encoded string, and it should upload just peachy. Try this if you want to double check before pushing:
window.open("data:application/octet-stream;base64," + base64);
This will download it as a file.
Other info:
To get the data as a Uint8Array, look at the MDN docs:
这篇关于获取Base64的途中从输入表单code文件的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
