0

我是 javascripting 的新手，我有这段代码。在此代码中，您可以选择一个文件，然后查看它的前 AB 字节、BC 字节或整个文件。此代码的演示位于：http ://www.html5rocks.com/en/tutorials/file/dndfiles/ - 标题：切片文件。

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

  2. 问题：当我上传一个 html 文件时，脚本没有显示该文件的部分内容，但它显示了该文件的源代码部分。例如，如果上传的文件包含一个 image 标签，在结果中我看不到图片，而只有完全重写的源代码。有什么办法让javascript结果像用html编写的普通页面一样？

对于熟练的人来说，这可能是原始问题，但是我的编程知识以 C 语言知识结束，当我学习 php 或 javascript 时，我只是在猜测。大多数时候我是成功的，但不是现在:(

感谢每个答案！

<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>
4

2 回答 2

1

  1. 不可以。出于安全原因，您不能在没有用户选择的情况下直接与文件系统交互。想象有人在做upload 'known/path/to/passwords'。

  2. 这很困惑。文件的内容和源代码是不同的想法。你在混合关卡。文档有内容。并且文档可能由文件中的源代码表示。但是您不上传文件。您上传一个文件，即代表该源代码的字节集。将其解释为文档是您需要执行的单独工作。

于 2013-02-08T15:04:37.113 回答
0

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

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

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

问：当我上传一个 html 文件时，脚本没有显示该文件的部分内容，但它显示了该文件的源代码部分。

这就是它应该如何工作的方式。html 文件仅包含标记；图片是不同的文件。

有什么办法让javascript结果像用html编写的普通页面一样？

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

于 2013-02-08T15:05:36.773 回答