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

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

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

クライアント環境
GoogleCrome
Internetexplorer11

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

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

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

html
1<!-- 202007311050 -->
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title></title>
6	<link rel="stylesheet" type="text/css" href="test.css" />
7</head>
8<body>
9	<script type="text/javascript" src="../common/jquery-3.4.1.min.js"></script>
10	<script type="text/javascript" src="../manage/test.js"></script>
11
12        <div class="version">
13            var：1.00
14        </div>
15
16        <div class="caption_box1">
17            <fieldset><legend class="test1">test1</legend>
18                <pre><div class="usertext" id="test1"></div></pre></fieldset>
19        </div>
20
21        <div class="caption_box2">
22            <fieldset><legend class="test2">test2</legend>
23                <pre><div class="usertext" id="test2"></div></pre></fieldset>
24        </div>
25
26        <div class="caption_box3">
27            <fieldset><legend class="test3">test3</legend>
28                <pre><div class="usertext" id="test3"></div></pre></fieldset>
29        </div>
30
31	<div class="caption_box4">
32            	<label for="txtfile">
33			<a id="modal-open" class="button-link">ファイル取込</a>
34		</label>
35        </div>
36
37	<!-- ここからモーダルウィンドウ -->
38	<div id="modal-content">
39		<form id="fileForm">
40			<div>アカウント: admin</div>
41			<input type="text" id="password">
42                	<input type="button" id="md5Button" value="認証ボタン">
43
44			<div class="dummy">
45                    		<input type="button" id="dummyButton1" value="test1ボタン">
46                    		<input type="button" id="dummyButton2" value="test2ボタン">
47                    		<input type="button" id="dummyButton3" value="test3ボタン">
48                	</div>
49       		</form>
50
51		<p><a id="modal-close" class="button-link2">閉じる</a></p>
52	<!-- モーダルウィンドウのコンテンツ終了 -->
53	</div>
54</body>
55</html>

JavaScript
1const HOST = "https://192.168.100.204/";
2const root = HOST + "client/manage/txt/";
3const test1 = "test1.txt";
4const test2 = "test2.txt";
5const test3 = "test3.txt";
6
7//------------------------------------------
8// 表示処理を行います
9//------------------------------------------
10window.onload = function() {
11    $.ajaxSetup({cache: false});
12    $("#test1").load(root + test1);
13    $("#test2").load(root + test2);
14    $("#test3").load(root + test3);
15    $("#dummyButton1")[0].onclick = onClickDummyButton1;
16    $("#dummyButton2")[0].onclick = onClickDummyButton2;
17    $("#dummyButton3")[0].onclick = onClickDummyButton3;
18    $("#md5Button")[0].onclick = onclickMd5Button;
19}
20
21//------------------------------------------
22// 認証処理を行います
23//------------------------------------------
24function onclickMd5Button() {
25    var formData = new FormData();
26    formData.append("user_name", "admin");
27    formData.append("password", $("#password")[0].value); // admin
28
29    $.ajax({
30        url : HOST + "/Server/Server/password_md5_checker.aspx",
31        type : "POST",
32        data : formData,
33        cache : false,
34        contentType : false,
35        processData : false,
36        dataType : "html",
37        async: false
38    })
39    .done(function(data, textStatus, jqXHR){
40        if(JSON.parse(data).IsMatchPassword){
41            document.getElementById("kekka").innerHTML = "";
42            document.getElementById("upload").innerHTML = "";
43            document.getElementById('dummyButton1').style.display = 'inline';
44            document.getElementById('dummyButton2').style.display = 'inline';
45            document.getElementById('dummyButton3').style.display = 'inline';
46        }else{
47            document.getElementById("kekka").innerHTML = "パスワードが間違っています";
48            document.getElementById("upload").innerHTML = "";
49            document.getElementById('dummyButton1').style.display = 'none';
50            document.getElementById('dummyButton2').style.display = 'none';
51            document.getElementById('dummyButton3').style.display = 'none';
52        }
53    });
54}
55//------------------------------------------
56// アップロード処理を行います1
57//------------------------------------------
58function onClickDummyButton1() {
59    const input = document.createElement('input');
60    input.type = 'file';
61    input.accept = '.txt, text/plain';
62    input.onchange = function(event) {
63        var formData = new FormData();
64        formData.append("text", event.target.files[0], test1);
65
66        $.ajax({
67            url : HOST + "/Server/Server/info_uploader.aspx",
68            type : "POST",
69            data : formData,
70            cache : false,
71            contentType : false,
72            processData : false,
73            dataType : "html",
74            async: false
75        })
76        .done(function(){
77            document.getElementById("upload").innerHTML = "test1をアップロードしました";
78        });
79    };
80    input.click();
81}
82
83//------------------------------------------
84// アップロード処理を行います2
85//------------------------------------------
86function onClickDummyButton2() {
87    const input = document.createElement('input');
88    input.type = 'file';
89    input.accept = '.txt, text/plain';
90    input.onchange = function(event) {
91        var formData = new FormData();
92        formData.append("text", event.target.files[0], test2);
93
94        $.ajax({
95            url : HOST + "/Server/Server/info_uploader.aspx",
96            type : "POST",
97            data : formData,
98            cache : false,
99            contentType : false,
100            processData : false,
101            dataType : "html",
102            async: false
103        })
104        .done(function(){
105            document.getElementById("upload").innerHTML = "test2をアップロードしました";
106        });
107    };
108    input.click();
109}
110
111//------------------------------------------
112// アップロード処理を行います3
113//------------------------------------------
114function onClickDummyButton3() {
115    const input = document.createElement('input');
116    input.type = 'file';
117    input.accept = '.txt, text/plain';
118    input.onchange = function(event) {
119        var formData = new FormData();
120        formData.append("text", event.target.files[0], test3);
121
122        $.ajax({
123            url : HOST + "/Server/Server/info_uploader.aspx",
124            type : "POST",
125            data : formData,
126            cache : false,
127            contentType : false,
128            processData : false,
129            dataType : "html",
130            async: false
131        })
132        .done(function(){
133            document.getElementById("upload").innerHTML = "test3をアップロードしました";
134        });
135    };
136    input.click();
137}
138
139//------------------------------------------
140// モーダルウィンドウ表示処理を行います
141//------------------------------------------
142$(function(){
143    $("#modal-open").click( function(){
144        $( this ).blur() ;
145        if( $( "#modal-overlay" )[0] ) return false ;
146        $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
147        $( "#modal-overlay" ).fadeIn() ;
148        centeringModalSyncer() ;
149        $( "#modal-content" ).fadeIn() ;
150        $( "#modal-overlay,#modal-close" ).unbind().click( function(){
151            $( "#modal-content,#modal-overlay" ).fadeOut(function(){
152                $('#modal-overlay').remove() ;
153            } ) ;
154        } ) ;
155    } ) ;
156
157    $( window ).resize( centeringModalSyncer ) ;
158
159    function centeringModalSyncer() {
160        var w = $( window ).width() ;
161        var h = $( window ).height() ;
162        var cw = $( "#modal-content" ).outerWidth();
163        var ch = $( "#modal-content" ).outerHeight();
164
165        $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
166    }
167} ) ;

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分調べてもわからないことは、質問しよう！

実装で気になる点

関連した質問