关于利用js实现txt文件上传和显示功能的疑惑

Question

//此处为txt文件上传预览的js代码function uploadfile(){
    var file=$("#txt")[0].files[0];    //判断上传文件是不是txt格式,判断后缀是不是.txt
    if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){
        alert("请上传格式为txt的文件！");
        windows.location="test.jsp";//重新定位到上传txt文件页面
    }    else//如果上传文件是txt文件，则显示文件的预览
    {        var reader=new FileReader;
        reader.readAsText(file,'gb2312');        //reader.readAsDataURL(file);
        reader.onload=function(evt){
            var data=evt.target.result;    
            $('#textarea_id').val(data);  
        }  
    }  
}js代码的实现功能已经写出来了，想实现的功能和效果如图所示，但是对于表单的创建有一些问题，表单应该如何创建，才能有效使用js的函数实现功能

Answer 1

https://blog.csdn.net/inuyasha1121/article/details/51915742

Answer 2

这个文章只提供了上传和读取，在显示方面没有讲解可以由后端返回txt内容，然后用js将内容输出到某个dom节点中

Answer 3

这个文章只提供了上传和读取，在显示方面没有讲解
你显示方面需要讲解什么？
    $('#textarea_id').val(data);不是已经显示到文本框中了吗  

Answer 4

<script src="http://test.good.oa.com/static/lib/js/jquery.min.js"></script>
<script>
function uploadfile(form){
var file=$("#txt")[0].files[0];    //判断上传文件是不是txt格式,判断后缀是不是.txt
if(file.name.substr(-4).toLocaleLowerCase() != '.txt') {
alert("请上传格式为txt的文件！");
form.reset();
    } else { //如果上传文件是txt文件，则显示文件的预览
var reader=new FileReader;
        reader.readAsText(file,'gb2312');        //reader.readAsDataURL(file);
        reader.onload=function(evt){
            var data=evt.target.result;    
            $('#textarea_id').val(data);  
};
}  
}
function onSubmit(form) {
return true; // 提交时的处理，另行按需求实现
}
</script>
<form action="upload.cgi" method="post" enctype="multiple/form-data" onsubmit="onSubmit(this)">
<input type="file" name="txt" id="txt" onchange="uploadfile(this.form)" accept="text/plain" />
<textarea id="textarea_id" name="textarea"></textarea>
<input type="submit" value="提交" />
</form>