Javascript-切片文件-需要修改Javascript

我是javascripting新手，我有这段代码。在这段代码中，您可以选择一个文件，然后查看它的第一个a-B字节、B-C字节或整个文件。 在：-标题：切片文件中演示此代码

问题：如何设置此脚本中使用的永久文件，而不是上传随机文件？（例如，我有test.html文件，我希望它是这个脚本使用的唯一一个文件）

问：当我上传一个html文件时，脚本不会显示该文件的部分内容，但会显示该文件的部分源代码。例如，如果上传的文件包含一个图像标签，结果中我看不到图片，只看到完全重写的源代码。有没有办法让javascript结果表现得像用html编写的普通页面

对于精通这一点的人来说，这可能是一个简单的问题，但我的编程知识以C语言的klowledge结束，当我学习php或javascript时，我只是在猜测。大多数时候我都成功了，但不是现在：(

每个答案都是Thanx

<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }

  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
</script>

#字节内容{
保证金：5px0；
最大高度：100px；
溢出y：自动；
溢出x：隐藏；
}
#字节_范围{页边距顶端：5px；}
读取字节：
1-5
6-15
7-8
整个文件
函数readBlob（opt_startByte，opt_stopByte）{
var files=document.getElementById（'files'）.files；
如果（！files.length）{
警报（'请选择一个文件！'）；
返回；
}
var file=files[0]；
var start=parseInt（opt_startByte）| 0；
var stop=parseInt（opt_stopByte）| | file.size-1；
var reader=new FileReader（）；
//如果我们使用onloadend，我们需要检查readyState。
reader.onloadend=函数（evt）{
如果（evt.target.readyState==FileReader.DONE）{//DONE==2
document.getElementById（'byte_content'）。textContent=evt.target.result；
document.getElementById（'byte_range'）。textContent=
['读取字节：'，开始+1'，-'，停止+1，
'of'，file.size'，byte file'].join（“”）；
}
};
var blob=file.slice（开始、停止+1）；
reader.readAsBinaryString（blob）；
}
document.querySelector（'.readBytesButtons'）。addEventListener（'click'，函数（evt）{
if（evt.target.tagName.toLowerCase（）=='按钮'）{
var startByte=evt.target.getAttribute（'data-startByte'）；
var-endByte=evt.target.getAttribute（'data-endByte'）；
readBlob（起始字节，结束字节）；
}
}，假）；

不可以。出于安全原因，您无法在用户未做出选择的情况下直接与文件系统交互。想象有人正在上传“已知/路径/到/密码”

这很混乱。文件的内容和源代码是不同的概念。您在混合级别。文档有内容。文档可能由文件中的源代码表示。但您不上载文档。您上载一个文件，即表示该源代码的字节集。任何将其解释为文档是您需要执行的另一项工作

问题1：如何设置此脚本中使用的永久文件，而不是上传随机文件

如果用户未明确“上载”文件，则无法从用户的计算机访问任何文件。其他任何内容都可能是安全问题。但是，某些“应用”（浏览器扩展名等）可以拥有此权限，并且在某些浏览器中，您可以禁用安全性

要每次加载一个特定的文件，您应该使用ajax请求发送到web

问：当我上传一个html文件时，脚本不会显示该文件的部分内容，但会显示该文件的部分源代码

html文件只包含标记；图片是另一个文件

有没有办法让javascript结果表现得像用html编写的普通页面

---

当然，您可以通过将HTML源代码写入iframe或其他内容来呈现它。但它不会访问作为本地文件的图像。

如果没有用户交互，即使使用新的文件Api，也无法从磁盘读取文件，因此无法设置“默认值”文件选择如果您自己提供文件，那么只需将其放入Ajax并显示其中的htmlfragments