HTML5 and secret encoding

Question

This is my first post on SO, so be careful.

I am currently developing a web application that uses the new HTML5 target.result result. which allows me to read the contents of a text file without having to upload anything to the server.

The problem I am facing is about encoding. Thus, usually the web content is created through the page itself in the form of a blog post, comment or any other that matches the encoding of this page and the database configuration. However, this new HTML5 functionality allows us to retrieve the contents of a text file without knowing the source encoding or format of the document in question.

It makes sense to encode the data before it is sent to ajax, so I tried many different ways to convert text to utf-8, as well as through various data types. I already went through the entire route, htaccess, meta, content-type.

It is not surprising that many of them find the whole process of encoding, decoding URIs using different encodings, ASCII, different languages ​​and ajax dataTypes of such pain.

I think the community can benefit from a solution that can receive text from a text document of any type, regardless of the encoding or format in any language, and display it using the ajax request request in its original form with the added utf-8 bonus. No weird characters no one can read and finally put an end to those diamond question marks.

Here is an example of where I am now.

:

... : swiss

, , , -?

, Google google?

EDIT: , ABC, swiss- utf-8. , utf-8 utf-8 , .

EDIST: 2 , . babblingo

javascript, ajax:

function handleFileSelect(evt) {

evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files;

for (var i = 0, f; f = files[i]; i++) {
    var reader = new FileReader();
    reader.onload = (function(theFile) {
        return function(e) {
            var insertText = e.target.result;
            var fields = 'text=' + insertText;
            $.ajax({
                type: "POST",
                url: "ajax.php?action=addfile",
                data: fields,
                dataType: "json",
                complete: function (data) {
                    if (data.responseJSON.message) {
                        $( "#modal-message h4" ).replaceWith( "<h4 class='modal-title text-center'>"+data.responseJSON.message+"</h4>" );
                    }
                    if (data.responseJSON.report) {
                        $( "#report_box" ).replaceWith( '<div id="report_box">'+data.responseJSON.report+'</div>' );
                    }
                    if (data.responseJSON.import) {
                        $('#output_box').replaceWith('<div id="output_box" class="hidden-print">'+data.responseJSON.import+'</div>');
                    }
                    $('#modal-message').modal('show');
                    setTimeout(function() {$('#modal-message').modal('hide');}, 3000);
                }
            });


        };
    })(f);

    reader.readAsText(f);
}
}

Answer 1

, , " " , utf-8, html.

html-. ñ = > & ntilde; . .

function createEntities(source) {
    var map = [
       { key:"á", value: "<b>&aacute;</b>"},
       { key:"ñ", value: "<b>&ntilde;</b>"},
        { key:"ó", value: "<b>&oacute;</b>" },
       { key:"'", value: "<b>&apos;</b>" }
    ];
    var target = source;
    for ( prop in map ) {
       var pair = map[prop];
       target = target.replace(pair.key,pair.value)
    }
    return target;
}

jsFiddle, . , .