JavaScript reads binary file and uses Ajax to transmit binary stream method _javascript tips

Comprehensive online tutorials, plus their own practice to come up with the method, currently able to compatible with Google, IE11, IE10.

There is nothing special about the contents of the HTMLBody.

<div id= "Dconfirm" >
<p style= "float:left;margin-left:20px;margin-top:20px" >
<form action= " Javascript:uploadandsubmit (); "Name=" Demoform "id=" Demoform "method=" post "enctype=" Multipart/form-data ">
<p> uploading files: <input type= "file" name= "file" id= "Str_file"/></p> <p><input
"Submit" value= "Upload"/></p>
</form>
</p>
</div>

To read a binary file:

function Uploadandsubmit ()
{
Filename=document.getelementbyid ("Str_file"). Value;
var form = document.forms["Demoform"];
if (filename!= "")
{
try
{
var obj = new ActiveXObject ("ADODB.") Stream ");//This must be
ie
catch (e)
{
var file = form[" file "].files[0];
var reader = new FileReader ();
Reader.readasbinarystring (file)//This read is asynchronous
reader.onloadend=function ()
{
//This event after the read is completed, Either success or failure will trigger
if (reader.error) {
console.log (reader.error);
} else {
uploadAndSubmit2 ( Reader.result);
}
return;
}
var bf1=new binaryfile (filename);//This reading is synchronized
uploadAndSubmit2 (bf1. ReadAll ());
}

Here to make a judgment on the browser type, if not IE then use FileReader to read, if it is IE use ActiveX control to read. There is a pit, although IE11 and IE10 do not support methods of FileReader objects, IE11 and IE10 "typeof FileReader" are not "undefined", and it is difficult to differentiate browsers directly by whether or not to support FileReader. Also note that the FileReader method is asynchronous read files, ActiveX is synchronized reading files, I have not wanted to understand how these two routes encapsulated in a method, I do not know if we have a good solution.

Where is the Binaryfile object's construction method excerpted from Http://www.codeproject.com/Articles/17825/Reading-and-Writing-Binary-Files-Using-JScript? msg=3718403 technology Blog, in the blog response to an improved method is said to be more efficient, but because did not understand, so chose the original method.

The original method is very long:

When using the ADODB.stream control, be aware of the conversion function Binaryfile (name) {var adtypebinary = 1 var adtypetext = 2 between the iso-8859-1 and Windows-1252 character sets var adsavecreateoverwrite = 2//The trick-this is the "old fassioned" not translation page//It lest JavaScript use s
Trings to act like Raw octets var codepage= ' 437 ';
This.path=name;
var forward = new Array ();
var backward = new Array (); Note-for better performance I should preconvert these hex//definitions to decimal-at some point:-)-AJT forward
[' n '] = ' 00c7 ';
forward[' bayi '] = ' 00FC ';
"forward['" = ' 00E9 ';
Forward[' a '] = ' 00E2 ';
"forward["] = ' 00E4 ';
Forward[' to '] = ' 00E0 ';
Forward[' a '] = ' 00E5 ';
Forward[' a '] = ' 00E7 ';
"forward[" = ' 00EA ';
"forward[" = ' 00EB ';
forward[' 8A '] = ' 00E8 ';
forward[' 8B '] = ' 00EF ';
forward[' 8C '] = ' 00EE ';
forward[' 8D '] = ' 00EC ';
forward[' 8E '] = ' 00c4 ';
forward[' 8F '] = ' 00c5 ';
forward[' 00c9 ';
Forward[' a '] = ' 00E6 ';
"forward['" = ' 00c6 ';
"forward['" = ' 00f4 ';
forward[' 00f6 '; forward[' 95 '] =' 00f2 ';
forward[' n '] = ' 00FB ';
"forward['" = ' 00f9 ';
forward[' = ' 00FF ';
"forward[" = ' 00d6 ';
forward[' 9A '] = ' 00DC ';
forward[' 9B '] = ' 00a2 ';
forward[' 9C '] = ' 00a3 ';
forward[' 9D '] = ' 00a5 ';
forward[' 9E '] = ' 20a7 ';
forward[' 9F '] = ' 0192 ';
forward[' A0 '] = ' 00E1 ';
forward[' A1 ' = ' 00ED ';
forward[' A2 '] = ' 00f3 ';
forward[' A3 ' = ' 00FA ';
forward[' A4 '] = ' 00f1 ';
forward[' A5 '] = ' 00d1 ';
forward[' A6 ' = ' 00AA ';
forward[' A7 ' = ' 00BA ';
forward[' A8 ' = ' 00BF ';
forward[' A9 '] = ' 2310 ';
forward[' AA ' = ' 00AC ';
forward[' AB '] = ' 00BD ';
forward[' AC ' = ' 00BC ';
forward[' AD '] = ' 00a1 ';
forward[' AE '] = ' 00AB ';
forward[' AF '] = ' 00BB ';
forward[' B0 '] = ' 2591 ';
forward[' B1 '] = ' 2592 ';
forward[' B2 '] = ' 2593 ';
forward[' B3 '] = ' 2502 ';
forward[' B4 '] = ' 2524 ';
forward[' B5 '] = ' 2561 ';
forward[' B6 '] = ' 2562 ';
forward[' B7 '] = ' 2556 ';
forward[' B8 '] = ' 2555 ';
forward[' B9 '] = ' 2563 ';
forward[' BA '] = ' 2551 ';
forward[' BB ' = ' 2557 ';
forward[' BC '] = ' 255D ';
forward[' BD ' = ' 255C ';
forward[' be '] = ' 255B '; forward[' BF '] = ' 2510 ';
forward[' C0 '] = ' 2514 ';
forward[' C1 '] = ' 2534 ';
forward[' C2 ' = ' 252C ';
forward[' C3 ' = ' 251C ';
forward[' C4 '] = ' 2500 ';
forward[' C5 ' = ' 253C ';
forward[' C6 ' = ' 255E ';
forward[' C7 ' = ' 255F ';
forward[' C8 ' = ' 255A ';
forward[' C9 '] = ' 2554 ';
forward[' CA '] = ' 2569 ';
forward[' CB '] = ' 2566 ';
forward[' CC '] = ' 2560 ';
forward[' CD ' = ' 2550 ';
forward[' CE ' = ' 256C ';
forward[' CF '] = ' 2567 ';
forward[' D0 '] = ' 2568 ';
forward[' D1 '] = ' 2564 ';
forward[' D2 '] = ' 2565 ';
forward[' D3 '] = ' 2559 ';
forward[' D4 '] = ' 2558 ';
forward[' D5 '] = ' 2552 ';
forward[' D6 '] = ' 2553 ';
forward[' D7 ' = ' 256B ';
forward[' D8 ' = ' 256A ';
forward[' D9 '] = ' 2518 ';
forward[' DA '] = ' 250C ';
forward[' DB ' = ' 2588 ';
forward[' DC ' = ' 2584 ';
forward[' DD '] = ' 258C ';
forward[' DE '] = ' 2590 ';
forward[' DF '] = ' 2580 ';
forward[' E0 '] = ' 03b1 ';
forward[' E1 ' = ' 00DF ';
forward[' E2 '] = ' 0393 ';
forward[' E3 '] = ' 03c0 ';
forward[' E4 '] = ' 03a3 ';
forward[' E5 '] = ' 03c3 ';
forward[' E6 '] = ' 00b5 ';
forward[' E7 '] = ' 03c4 ';
forward[' E8 '] = ' 03a6 ';forward[' E9 '] = ' 0398 ';
forward[' EA '] = ' 03a9 ';
forward[' EB '] = ' 03b4 ';
forward[' EC ' = ' 221E ';
forward[' ED '] = ' 03c6 ';
forward[' EE '] = ' 03b5 ';
forward[' EF ' = ' 2229 ';
forward[' F0 '] = ' 2261 ';
forward[' F1 '] = ' 00b1 ';
forward[' F2 '] = ' 2265 ';
forward[' F3 '] = ' 2264 ';
forward[' F4 '] = ' 2320 ';
forward[' F5 '] = ' 2321 ';
forward[' F6 '] = ' 00f7 ';
forward[' F7 '] = ' 2248 ';
forward[' F8 '] = ' 00b0 ';
forward[' F9 '] = ' 2219 ';
forward[' FA '] = ' 00b7 ';
forward[' FB '] = ' 221A ';
forward[' FC '] = ' 207F ';
forward[' FD '] = ' 00b2 ';
forward[' FE ' = ' 25a0 ';
forward[' FF '] = ' 00a0 ';
backward[' C7 '] = ' 80 ';
backward[' FC '] = ' 81 ';
backward[' E9 '] = ' 82 ';
backward[' E2 '] = ' 83 ';
backward[' E4 '] = ' 84 ';
backward[' E0 '] = ' 85 ';
backward[' E5 '] = ' 86 ';
backward[' E7 '] = ' 87 ';
backward[' EA '] = ' 88 ';
backward[' EB '] = ' 89 ';
backward[' E8 ' = ' 8A ';
backward[' EF ' = ' 8B ';
backward[' EE ' = ' 8C ';
backward[' EC ' = ' 8D ';
backward[' C4 ' = ' 8E ';
backward[' C5 ' = ' 8F ';
backward[' C9 '] = ' 90 ';
backward[' E6 '] = ' 91 ';
backward[' C6 '] = ' 92 '; backward[' F4 '] = ' 93 ';
backward[' F6 '] = ' 94 ';
backward[' F2 '] = ' 95 ';
backward[' FB '] = ' 96 ';
backward[' F9 '] = ' 97 ';
backward[' FF '] = ' 98 ';
backward[' D6 '] = ' 99 ';
backward[' DC ' = ' 9A ';
backward[' A2 ' = ' 9B ';
backward[' A3 ' = ' 9C ';
backward[' A5 ' = ' 9D ';
backward[' 20a7 ' = ' 9E ';
backward[' the ' 9F ';
backward[' E1 '] = ' A0 ';
backward[' ED '] = ' A1 ';
backward[' F3 '] = ' A2 ';
backward[' FA '] = ' A3 ';
backward[' F1 '] = ' A4 ';
backward[' D1 '] = ' A5 ';
backward[' AA '] = ' A6 ';
backward[' BA '] = ' A7 ';
backward[' BF '] = ' A8 ';
backward[' 2310 '] = ' A9 ';
backward[' AC ' = ' AA ';
backward[' BD ' = ' AB ';
backward[' BC '] = ' AC ';
backward[' A1 ' = ' AD ';
backward[' AB '] = ' AE ';
backward[' BB ' = ' AF ';
backward[' 2591 '] = ' B0 ';
backward[' 2592 '] = ' B1 ';
backward[' 2593 '] = ' B2 ';
backward[' 2502 '] = ' B3 ';
backward[' 2524 '] = ' B4 ';
backward[' 2561 '] = ' B5 ';
backward[' 2562 '] = ' B6 ';
backward[' 2556 '] = ' B7 ';
backward[' 2555 '] = ' B8 ';
backward[' 2563 '] = ' B9 ';
backward[' 2551 '] = ' BA ';
backward[' 2557 ' = ' BB ';
backward[' 255D '] = ' BC '; backward[' 255C'] = ' BD ';
backward[' 255B '] = ' be ';
backward[' 2510 '] = ' BF ';
backward[' 2514 '] = ' C0 ';
backward[' 2534 '] = ' C1 ';
backward[' 252C '] = ' C2 ';
backward[' 251C '] = ' C3 ';
backward[' 2500 '] = ' C4 ';
backward[' 253C '] = ' C5 ';
backward[' 255E '] = ' C6 ';
backward[' 255F '] = ' C7 ';
backward[' 255A '] = ' C8 ';
backward[' 2554 '] = ' C9 ';
backward[' 2569 ' = ' CA ';
backward[' 2566 '] = ' CB ';
backward[' 2560 '] = ' CC ';
backward[' 2550 '] = ' CD ';
backward[' 256C '] = ' CE ';
backward[' 2567 ' = ' CF ';
backward[' 2568 '] = ' D0 ';
backward[' 2564 '] = ' D1 ';
backward[' 2565 '] = ' D2 ';
backward[' 2559 '] = ' D3 ';
backward[' 2558 '] = ' D4 ';
backward[' 2552 '] = ' D5 ';
backward[' 2553 '] = ' D6 ';
backward[' 256B '] = ' D7 ';
backward[' 256A '] = ' D8 ';
backward[' 2518 '] = ' D9 ';
backward[' 250C '] = ' DA ';
backward[' 2588 ' = ' DB ';
backward[' 2584 ' = ' DC ';
backward[' 258C '] = ' DD ';
backward[' 2590 ' = ' DE ';
backward[' 2580 '] = ' DF ';
backward[' 3b1 '] = ' E0 ';
backward[' DF '] = ' E1 ';
Backward[' 393 '] = ' E2 ';
backward[' 3c0 '] = ' E3 ';
backward[' 3a3 '] = ' E4 '; backward[' 3c3 '] = ' E5 ';
backward[' B5 '] = ' E6 ';
backward[' 3c4 '] = ' E7 ';
backward[' 3a6 '] = ' E8 ';
backward[' 398 '] = ' E9 ';
backward[' 3a9 '] = ' EA ';
backward[' 3b4 '] = ' EB ';
backward[' 221E '] = ' EC ';
backward[' 3c6 '] = ' ED ';
backward[' 3b5 ' = ' EE ';
backward[' 2229 ' = ' EF ';
backward[' 2261 '] = ' F0 ';
backward[' B1 '] = ' F1 ';
backward[' 2265 '] = ' F2 ';
backward[' 2264 '] = ' F3 ';
backward[' 2320 '] = ' F4 ';
backward[' 2321 '] = ' F5 ';
backward[' F7 '] = ' F6 ';
backward[' 2248 '] = ' F7 ';
backward[' B0 '] = ' F8 ';
backward[' 2219 '] = ' F9 ';
backward[' B7 '] = ' FA ';
backward[' 221A '] = ' FB ';
backward[' 207F '] = ' FC ';
backward[' B2 '] = ' FD ';
backward[' 25a0 ' = ' FE ';
backward[' A0 '] = ' FF ';
var hd= "0123456789ABCDEF"; 
THIS.D2H = function (d) {var h = hd.substr (d&15,1); while (d>15) {d>>=4;h=hd.substr (d&15,1) +h;} return h; } this.h2d = function (h) {return parseint (h,16);} Writeall = function (what) {//create Stream object//var binarystream = WScript.CreateObject ("ADODB.
Stream "); var binarystream = new ActiveXObject ("ADODB. Stream ");
Specify stream Type-we cheat and get string but ' like ' binary binarystream.type = adTypeText;
Binarystream.charset = ' 437 ';
Open the stream Binarystream.open (); Write to the stream Binarystream.writetext (this.
Forward437 (what));
Write the string to the disk Binarystream.savetofile (This.path, adsavecreateoverwrite);
Clearn up Binarystream.close (); } this. ReadAll = function () {//create Stream object-needs ADO 2.5 or Heigher//var = Binarystream ("WScript.CreateObject. Stream ") var binarystream = new ActiveXObject (" ADODB.
Stream ");
Specify stream Type-we cheat and get string but ' like ' binary binarystream.type = adTypeText;
Binarystream.charset = CodePage;
Open the stream Binarystream.open ();
Load the file data from disk to stream object Binarystream.loadfromfile (This.path);
Open the stream and get binary ' string ' from the object var what = Binarystream.readtext;
Clean up binarystream.close (); return this.
Backward437 (what); }/* Convert a octet number To A code page 437 char code */this. 
Forward437 = function (instring) {var encarray = new Array (); var tmp= '; var i=0; var c=0; var l=instring.length; var cc;
var h; for (; i<l;++i) {C + +; if (c==128) {Encarray.push (TMP); tmp= '; c=0;} cc=instring.charcodeat (i); if (cc<128) {tmp+=st
Ring.fromcharcode (CC);
else {h=this.d2h (cc); h=forward[' +h]; Tmp+=string.fromcharcode (this.h2d (h));} if (tmp!= ') {Encarray.push (TMP);}//This loop progressive concatonates the//array elements entil there-only one VA
R ar2=new Array ();
for (;encarray.length>1;) {var l=encarray.length for (Var c=0;c<l;c+=2) {if (c+1==l) {Ar2.push (encarray[c]);} else {Ar2.push (' +encarray[c]+e
Ncarray[c+1]);
}} encarray=ar2;
Ar2=new Array ();
return encarray[0]; }/* Convert a code page 437 char code to a octet number*/. Backward437 = function (instring) {var encarray = new Array (); var tmp= '; var i=0; var c=0; var L=instring.length; var cc
;
var h; for (; i<l;++i) {C + +; if (c==128) {Encarray.Push (TMP);
Tmp= ';
c=0;
} cc=instring.charcodeat (i); if (cc<128) {tmp+=string.fromcharcode (cc);} else {h=this.d2h (cc); h=backward[' +h]; Tmp+=string.fromcharcode (
This.h2d (h)); } if (tmp!= ') {Encarray.push (TMP);}//This loop progressive concatonates the//array elements Entil there
e var ar2=new Array ();
for (;encarray.length>1;) {var l=encarray.length for (Var c=0;c<l;c+=2) {if (c+1==l) {Ar2.push (encarray[c]);} else {Ar2.push (' +encarray[c]+e
Ncarray[c+1]);
}} encarray=ar2;
Ar2=new Array ();
return encarray[0]; }
}

Where the main body part is:

This. ReadAll = function ()
{
//create Stream object-needs ADO 2.5 or heigher//var
= Binarystream Ject ("ADODB.") Stream ")
var binarystream = new ActiveXObject (" ADODB. Stream ");
Specify stream Type-we cheat and get string but ' like ' binary binarystream.type
= adTypeText;
Binarystream.charset = CodePage;
Open the Stream
binarystream.open ();
Load the file data from disk to stream object
binarystream.loadfromfile (this.path);
Open the stream and get binary ' string ' from the object
var what = Binarystream.readtext;
Clean up
binarystream.close ();
return this. Backward437 (what);
}

Here is the use of "ADODB." Stream control to read a file, you can see that the author uses a read type of adTypeText (2), which reads the binary file in text read mode! The document was changed to adTypeBinary (1) type and then nothing was read and I don't know why.

The rest of the code is doing code conversion work, the general meaning is to read the file to use the "iso-8859-1" character set, the use of HTTP to send a file with the "Windows-1252" character set, the two character sets only a very few characters differ, So find the difference in the data you read and convert it to another character set representation.

Ajax sends binary streams:

function UploadAndSubmit2 (binarycontent)
{
Url = urlhead + "Cook.ashx";
Xmlhttp=new XMLHttpRequest ();
Xmlhttp.open ("POST", Url + "? Method=post&func=file_upload&filename=" + encodeURIComponent (filename.split ("\ \ ") [Filename.split (" \ "). Length-1]);//ie processing Chinese character URL
xmlhttp.sendasbinary (binarycontent);
Xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readystate = 4) {
if (Xmlhttp.status =) {
   
    var Str=xmlhttp.response;
alert (str);
Xmlhttp.abort ();}}}

   

For binary transmissions There is no "window" compatible with older versions of IE. ActiveXObject ("Msxm12.xmlhttp") "and" window. ActiveXObject ("Microsoft.XMLHTTP"), I don't know if you have any binary transmission methods that support both ActiveX controls.

In a tutorial, line sixth is preceded by a line:

Xmlhttp.overridemimetype (' Text\/plain; charset=x-user-defined ');//:x-user-defined tell the browser not to parse the returned data
Add this line after the browser will not be returned to the background of the code format of the data to be parsed, specifically to return to the front of the Chinese text is displayed as "" or "mouth", I estimate the author did this in order to receive backstage in the foreground of the binary data.

In fact, only Firefox's XMLHttpRequest support Sendasbinary method, in order to use under IE and Google, need to add a prototype method to XMLHttpRequest:

Add a binary send function to the XMLHttpRequest prototype
XMLHttpRequest.prototype.sendAsBinary = function (datastr) {function
Bytevalue (x) {return
x.charcodeat (0) & 0xFF;
}
var ords = Array.prototype.map.call (Datastr, bytevalue);
var ui8a = new Uint8array (ords);
This.send (Ui8a.buffer);
}

The code here is not quite understood, where line sixth IE8 not supported, line seventh IE9 not supported.

The Java Serverlet is used in the background, and the following is the code for the Java class that is finally invoked:

Public String FileUpload (HttpServletRequest request) throws IOException
{
request.setcharacterencoding (" UTF-8 ");
Bufferedinputstream Filein = new Bufferedinputstream (Request.getinputstream ()); 
STRING fn = request.getparameter ("FileName"); 
byte[] buf = new byte[1024]; 
File File = new file ("d:/" + fn); 
Bufferedoutputstream fileout = new Bufferedoutputstream (new FileOutputStream (file)); 
Try
{while 
(true) 
{ 
//Read data
int bytesin = filein.read (buf, 0, 1024); 
System.out.println (bytesin); 
if (Bytesin = = 1) 
{break 
; 
} 
else 
{ 
fileout.write (buf, 0, Bytesin); 
} 
} 
Fileout.flush (); 
Return ("Save Success");
}
catch (Exception e)
{return
"save failed, Cause:" +e.tostring ();
}
Finally
{ 
fileout.close (); 
}
}

The above is a small set to introduce the JavaScript reading binary files and Ajax transmission of the binary flow method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!