Question

我是javascripting的新手，我有这段代码。在此代码中，您可以选择一个文件，然后查看它的第一个A-B字节，B-C字节或整个文件。在http://www.html5rocks.com/en/tutorials/file/dndfiles/展示此代码 - tittle：SLICING A FILE。

问题：如何设置要在此脚本中使用的永久文件，而不是上传随机文件的机会？（例如，我有文件test.html，我希望它是此脚本使用的唯一一个文件）。
问题：当我上传html文件时，脚本不会显示该文件的部分内容，但会显示该文件的SOURCE CODE部分。例如，如果上传的文件包含图像标记，则在结果中我看不到图片，而只看到完全重写的源代码。有没有什么方法可以将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>

Answer 1

没有。出于安全原因，如果用户不做出选择，您无法直接与文件系统进行交互。想象某人在做upload 'known/path/to/passwords'。
这很困惑。文件的内容和源代码是截然不同的想法。你是混合水平。文件有内容。并且文档可能由文件中的源代码表示。但是你没有上传文件。您上传文件，即表示该源代码的字节集。对此作为文件的任何解释都是您需要执行的单独工作。

Answer 2

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

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

要每次加载特定文件，您应该在网络中使用ajax请求。

问题：当我上传html文件时，脚本不会显示该文件的部分内容，但会显示该文件的SOURCE CODE部分。

它应该如何运作。 html文件只包含标记;图片是一个不同的文件。

有什么方法可以将javascript结果表现为用html编写的普通页面？

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

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

2 个答案: