2

i have html form with ENCTYPE="multipart/form-data" .It just contains the textbox of type 'file' which browses the file from local box.Here is the textbox code snippet

<td>
    <input name="fileNameAttr" id="filePath" size="52" type="file" value="">
</td>

I browse the file some image file from local box. The moment i select the file, filePath gets populated in text box. Now on click of some button, i want to convert the image in to base64 String in javascript. I am not using HTML5. Can i achieve it in javascript?

i can see some solution on net using HTML5 but that does not solve my purpose. If i need to use some third party utility , i can do that.

EDIT:- looks like jquery can help with $.base64.encode( "this is a test" ); but how to use it with type="file"?

M Sach
  • 33,416
  • 76
  • 221
  • 314

2 Answers2

3

this can be done by the HTML5 <canvas> for it

or

if you have node.js as an option then try something like that in img

or <img src="data:image/png;base64,jkasfhsdjkhsadf" />

example

var fs = require('fs');
var base64_data = new Buffer(fs.readFileSync('sample.png')).toString('base64');
console.log('<img alt="sample" src="data:image/png;base64,' + base64_data + '">');

check this (also source of example)

Data URI scheme

Good read

  1. How can you encode to Base64 using Javascript? //its for image
Community
  • 1
  • 1
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
1

If you could access the local filesystem via javascript, what would keep you from reading the password file or other private data?

This you can't do and it can't and won't be allowed in the future, for obvious reasons!

Gung Foo
  • 13,392
  • 5
  • 31
  • 39
  • +1 for what is most likely the case.There is a way in HTML5 you can load a local image into a canvas then javascript has full access to this (so there is a way to do it with images but not in the general) – Bob Fincheimer Oct 23 '12 at 15:48
  • If you know a (non mostly still unsupported = html5) way of accessing the binary data of an image directly from the client i would very much like to hear about it and will delete/edit my answer accordingly! – Gung Foo Oct 23 '12 at 15:49
  • you have to be right, I am just saying that there are reasons why this might change in currently-barely-supported-things or upcoming technologies – Bob Fincheimer Oct 23 '12 at 15:52
  • I believe that if "upcoming technologies" will allow direct access to your local filesystem via unverified 3rd party ECMA script... The intarwebs will be "rm -rf /"'ed soon after. Imagine someone not removing js/html from some comment plugin on a random website. Anyone evil enough could then post 2 lines of code that delete all the data on your local drive or worse, upload it somewhere. I don't believe that such a thing would be viable. – Gung Foo Oct 23 '12 at 15:54
  • yeah, they wouldn't do that. But there are legitimate reasons local file data could be used by JS. (for example: images/music) – Bob Fincheimer Oct 23 '12 at 15:56
  • I agree.. I could imagine some kind of firewalling mechanism. But considering the default users level of interest in things like that.. The above scenario is likely to still happen, no matter how secure you "think" you implemented this. There is a reason for the server-client methodology. :) – Gung Foo Oct 23 '12 at 16:08