JavaScript读二进制文件并用ajax传输二进制流的方法

时间:2021-05-26

综合网上多个教程,加上自己实践得出的方法,目前能够兼容谷歌、IE11、IE10。

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>上传文件: <input type="file" name="file" id="str_file"/></p><p><input type="submit" value="上传" /></p></form></p></div>

读取二进制文件:

function uploadAndSubmit(){filename=document.getElementById("str_file").value;var form = document.forms["demoForm"];if(filename!=""){try{var obj = new ActiveXObject("ADODB.Stream");//这个必然是IE}catch(e){var file = form["file"].files[0];var reader = new FileReader();reader.readAsBinaryString(file);//这个读法是异步的reader.onloadend=function(){// 这个事件在读取结束后,无论成功或者失败都会触发if (reader.error) {console.log(reader.error);} else {uploadAndSubmit2(reader.result);}}return;}var bf1=new BinaryFile(filename);//这个读法是同步的uploadAndSubmit2(bf1.ReadAll());}}

这里要对浏览器类型做一下判断,如果不是IE则使用FileReader进行读取,如果是IE则使用activex控件读取。这里有一个坑,虽然IE11和IE10不支持FileReader对象的方法,但IE11和IE10的“typeof FileReader”并不是“undefined”,难以直接通过是否支持FileReader来区分浏览器。还要注意的是FileReader方法是异步读文件,activex是同步读文件,我一直没想明白这两条路线怎样封装在一个方法里,不知大家有没有好办法。

其中BinaryFile对象的构造方法摘自http://ponent(filename.split("\\")[filename.split("\\").length-1]));//IE处理汉字urlxmlHttp.sendAsBinary(BinaryContent);xmlHttp.onreadystatechange = function (){if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {var str=xmlHttp.response;alert(str);xmlHttp.abort();}}}}

为了进行二进制传输这里没有使用兼容旧版本IE的“window.ActiveXObject("Msxm12.XMLHTTP")”和“window.ActiveXObject("Microsoft.XMLHTTP")”,不知大家有没有支持这两种activex控件的二进制传输方法。

在一篇教程里第六行前面有一行:

xmlHttp.overrideMimeType('text\/plain; charset=x-user-defined');//:x-user-defined告诉浏览器不要解析返回数据
加上这个一行后浏览器将不会对后台返回的数据的编码格式进行解析,具体来讲就是返回到前台的中文文本都显示为“ ”或“口”,我估计作者这样做是为了在前台接收后台传来的二进制数据。

事实上只有火狐的XMLHttpRequest支持sendAsBinary方法,为了在IE和谷歌下使用,需要给XMLHttpRequest增加一个原型方法:

//给XMLHttpRequest的原型添加二进制发送功能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);}

这里的代码就不太懂了,其中第六行IE8不支持、第七行IE9不支持。

后台使用的是java serverlet,以下是最终调用的java类的代码:

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) { // 读取数据int bytesIn = fileIn.read(buf, 0, 1024); System.out.println(bytesIn); if (bytesIn == -1) { break; } else { fileOut.write(buf, 0, bytesIn); } } fileOut.flush(); return("保存成功");}catch(Exception e){return "保存失败,原因:"+e.toString();}finally{ fileOut.close(); }}

以上所述是小编给大家介绍的JavaScript读二进制文件并用ajax传输二进制流的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章