前端Ａjax實現預覽TXT文件（相容UTF-8，ANCII,Unicode）
最近在做文件的預覽問題，在做txt的時候,原本是用HTML <object> 標籤,但是讀取的時候亂碼，經查詢資料，知道了原來txt文件預設的是ANCII編碼，解決辦法如下;
一、將ANCII轉Unicode，但是沒有成功，
//ASCII 轉換 Unicode
function AsciiToUnicode(content) {
result = '';
for (var i=0; i<content.length; i++)
result+='&#' + content.charCodeAt(i) + ';';
return result;
}二、後來再查詢資料，知道了html5裡面有FileReader函式，測試也是可以讀取三種檔案，但是不能對編碼格式做設定，然後在專案中測試也失敗了
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.11.1.min.js"></script>
<title>js實現線上預覽圖片與TXT文件</title>
</head>
<body>
<input type="file" onchange="preview(this.files)" id="inputBox" />
<script>
function preview(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader(); //new一個FileReader例項
if (/text+/.test(file.type)) { //判斷檔案型別，是不是text型別
reader.onload = function() {
$('body').append('<pre>' + this.result + '</pre>');
}
reader.readAsText(file, 'gb2312');
} else if (/image+/.test(file.type)) { //判斷檔案是不是imgage型別
reader.onload = function() {
$('body').append('<img src="' + this.result + '"/>');
}
reader.readAsDataURL(file);
}
}
}
</script>
</body>
</html>
三、然後再查資料，查到ajax的時候，知道其可以對編碼格式做設定，果斷嘗試，測試demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function viewfile(){
var request=null;
if(window.XMLHttpRequest){request=new XMLHttpRequest();}else if(window.ActiveXObject){request=new ActiveXObject("Microsoft.XMLHTTP");}
if(request){
request.open("GET","/one/downloadFile.spe?dtype=PostgresXL&mode=html&fileid=2018171716930001001",true);
request.overrideMimeType("text/html;charset=gb2312");//設定以gb2312編碼識別資料
request.onreadystatechange=function(){
if(request.readyState===4){
if (request.status == 200 || request.status == 0){
//var reader = new FileReader();
alert(request.responseText);
document.getElementById("vv").innerHTML=request.responseText;
}
}
}
request.send(null);
}else{
alert("error");
}
}
</script>
<input type="button" value="預覽" onclick="viewfile();"/>
<div id="vv"></div>
</body>
</html>
結果截圖：
將其運用到專案中時候，在ajax的URl傳多個引數的時候，正確方式使用如下
url : "/one/downloadFile.spe?dtype=PostgresXL&mode=html&fileid="+fileId+"&fileName="+fileName
至此，這個問題算解決了，