文字化け防止のため文字コードを統一したい

すみません。8/3 18時以降はパソコンがいじれないので結果報告ができません。なので明日になってしまいます。申し訳ありません

テキストファイルをアップロードしてテキストファイルの文字コードがANSI等だと文字化けが起きてしまいます。なので文字化けが起きないよう何らかの手段があれば教えてください

詳しい環境追記致します
WEBサーバ IIS8.0
serverアプリ C# ASP.NET Webフォーム

クライアント環境
GoogleCrome
Internetexplorer11

プログラムの内容を端的に言うとボタンがひとつとテキストエリアが3つあります。ボタンを押すとポップアップが表示され3つのテキストエリアのどこにファイルをアップロードするかの内容と共に3つのボタンが表示されます。ボタンにはそれぞれのテキストエリアと連動していてボタンを押すとファイル選択ダイアログが出現、テキストファイルを指定してサーバにアップロードします。更新すると選択したボタンと連動したテキストエリアにテキストの内容が表示されます

アップロードするテキストファイルは基本SJISやUTF-8等の有名所です。そのままだと文字化けしてしまうのでどの文字コードでもWeb上に表示できるようにしたいです

何度も何度も申し訳ありません。もう少し頑張ってみようと思います
下記関係あるであろうコード記載します
下記コードはファイルをアップロードして表示することは出来ます。テキストファイル内にhtmlを記述するとそれが反映できるようにもなっています。しかし、文字コードがおかしいと文字化けしてしまいます。

html
<!-- 202007311050 -->
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
	<script type="text/javascript" src="../common/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../manage/test.js"></script>

        <div class="version">
            var：1.00
        </div>

        <div class="caption_box1">
            <fieldset><legend class="test1">test1</legend>
                <pre><div class="usertext" id="test1"></div></pre></fieldset>
        </div>

        <div class="caption_box2">
            <fieldset><legend class="test2">test2</legend>
                <pre><div class="usertext" id="test2"></div></pre></fieldset>
        </div>

        <div class="caption_box3">
            <fieldset><legend class="test3">test3</legend>
                <pre><div class="usertext" id="test3"></div></pre></fieldset>
        </div>

	<div class="caption_box4">
            	<label for="txtfile">
			<a id="modal-open" class="button-link">ファイル取込</a>
		</label>
        </div>

	<!-- ここからモーダルウィンドウ -->
	<div id="modal-content">
		<form id="fileForm">
			<div>アカウント: admin</div>
			<input type="text" id="password">
                	<input type="button" id="md5Button" value="認証ボタン">

			<div class="dummy">
                    		<input type="button" id="dummyButton1" value="test1ボタン">
                    		<input type="button" id="dummyButton2" value="test2ボタン">
                    		<input type="button" id="dummyButton3" value="test3ボタン">
                	</div>
       		</form>

		<p><a id="modal-close" class="button-link2">閉じる</a></p>
	<!-- モーダルウィンドウのコンテンツ終了 -->
	</div>
</body>
</html>

JavaScript
const HOST = "https://192.168.100.204/";
const root = HOST + "client/manage/txt/";
const test1 = "test1.txt";
const test2 = "test2.txt";
const test3 = "test3.txt";

//------------------------------------------
// 表示処理を行います
//------------------------------------------
window.onload = function() {
    $.ajaxSetup({cache: false});
    $("#test1").load(root + test1);
    $("#test2").load(root + test2);
    $("#test3").load(root + test3);
    $("#dummyButton1")[0].onclick = onClickDummyButton1;
    $("#dummyButton2")[0].onclick = onClickDummyButton2;
    $("#dummyButton3")[0].onclick = onClickDummyButton3;
    $("#md5Button")[0].onclick = onclickMd5Button;
}

//------------------------------------------
// 認証処理を行います
//------------------------------------------
function onclickMd5Button() {
    var formData = new FormData();
    formData.append("user_name", "admin");
    formData.append("password", $("#password")[0].value); // admin

    $.ajax({
        url : HOST + "/Server/Server/password_md5_checker.aspx",
        type : "POST",
        data : formData,
        cache : false,
        contentType : false,
        processData : false,
        dataType : "html",
        async: false
    })
    .done(function(data, textStatus, jqXHR){
        if(JSON.parse(data).IsMatchPassword){
            document.getElementById("kekka").innerHTML = "";
            document.getElementById("upload").innerHTML = "";
            document.getElementById('dummyButton1').style.display = 'inline';
            document.getElementById('dummyButton2').style.display = 'inline';
            document.getElementById('dummyButton3').style.display = 'inline';
        }else{
            document.getElementById("kekka").innerHTML = "パスワードが間違っています";
            document.getElementById("upload").innerHTML = "";
            document.getElementById('dummyButton1').style.display = 'none';
            document.getElementById('dummyButton2').style.display = 'none';
            document.getElementById('dummyButton3').style.display = 'none';
        }
    });
}
//------------------------------------------
// アップロード処理を行います1
//------------------------------------------
function onClickDummyButton1() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.txt, text/plain';
    input.onchange = function(event) {
        var formData = new FormData();
        formData.append("text", event.target.files[0], test1);

        $.ajax({
            url : HOST + "/Server/Server/info_uploader.aspx",
            type : "POST",
            data : formData,
            cache : false,
            contentType : false,
            processData : false,
            dataType : "html",
            async: false
        })
        .done(function(){
            document.getElementById("upload").innerHTML = "test1をアップロードしました";
        });
    };
    input.click();
}

//------------------------------------------
// アップロード処理を行います2
//------------------------------------------
function onClickDummyButton2() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.txt, text/plain';
    input.onchange = function(event) {
        var formData = new FormData();
        formData.append("text", event.target.files[0], test2);

        $.ajax({
            url : HOST + "/Server/Server/info_uploader.aspx",
            type : "POST",
            data : formData,
            cache : false,
            contentType : false,
            processData : false,
            dataType : "html",
            async: false
        })
        .done(function(){
            document.getElementById("upload").innerHTML = "test2をアップロードしました";
        });
    };
    input.click();
}

//------------------------------------------
// アップロード処理を行います3
//------------------------------------------
function onClickDummyButton3() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.txt, text/plain';
    input.onchange = function(event) {
        var formData = new FormData();
        formData.append("text", event.target.files[0], test3);

        $.ajax({
            url : HOST + "/Server/Server/info_uploader.aspx",
            type : "POST",
            data : formData,
            cache : false,
            contentType : false,
            processData : false,
            dataType : "html",
            async: false
        })
        .done(function(){
            document.getElementById("upload").innerHTML = "test3をアップロードしました";
        });
    };
    input.click();
}

//------------------------------------------
// モーダルウィンドウ表示処理を行います
//------------------------------------------
$(function(){
    $("#modal-open").click( function(){
        $( this ).blur() ;
        if( $( "#modal-overlay" )[0] ) return false ;
        $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
        $( "#modal-overlay" ).fadeIn() ;
        centeringModalSyncer() ;
        $( "#modal-content" ).fadeIn() ;
        $( "#modal-overlay,#modal-close" ).unbind().click( function(){
            $( "#modal-content,#modal-overlay" ).fadeOut(function(){
                $('#modal-overlay').remove() ;
            } ) ;
        } ) ;
    } ) ;

    $( window ).resize( centeringModalSyncer ) ;

    function centeringModalSyncer() {
        var w = $( window ).width() ;
        var h = $( window ).height() ;
        var cw = $( "#modal-content" ).outerWidth();
        var ch = $( "#modal-content" ).outerHeight();

        $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
    }
} ) ;

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Server
{
    public partial class info_uploader : Page
    {
        const string RELATIVE_PATH = "../../Client/Manage/txt/";

        readonly string _currentPath = AppDomain.CurrentDomain.BaseDirectory;

        protected void Page_Load(object sender, EventArgs e)
        {
            var file = Request.Files["text"];
            if (file == null)
                return;

            var filePath = string.Format(@"{0}{1}{2}", _currentPath, RELATIVE_PATH, file.FileName);
            file.SaveAs(filePath);

            var response = HttpContext.Current.Response;
            response.ClearContent();
            response.Buffer = false;
            response.End();
        }
    }
}

知人に聞いたところサーバサイドでアップロードしたファイルを開いてUTF形式で保存すればライブラリを使わなくていいとの事でした。先程ご返信頂いた人の中にEncordingConverterというのがあったりするという事だったのでライブラリ云々を考えないでこんな手段があるというのがありましたら教えていただいただけると幸いです

やりたいことを簡潔にしました。タイトル等変更しました。

BluOxy

2020/08/03 03:03 編集

FileReaderで読み込んだ後はどのようなことを実現したいのでしょうか。目的によってはJavaScriptのFileReaderの使用をやめてサーバー（ASP.NET）側から FileStream やリソースファイルを用いてファイルを読み込み、それをブラウザに表示した方が良いかもしれません。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問

同じタグがついた質問を見る