【问题标题】:Opening local files from chrome从 chrome 打开本地文件
【发布时间】:2014-10-04 11:00:41
【问题描述】:

是否可以在文件系统/网络驱动器(c:\abc.xlsxp:\abc.xlsx)上打开本地文件?

如果是这样,是否可以通过我为谷歌浏览器创建的自定义扩展来做到这一点?

【问题讨论】:

    标签: javascript google-chrome


    【解决方案1】:

    HTML5 最终通过文件 API 规范提供了一种与本地文件交互的标准方式。

    规范提供了几个用于从“本地”文件系统访问文件的接口:

    1. 文件 - 单个文件;提供只读信息,例如名称、文件大小、mimetype 和对文件句柄的引用。
    2. FileList - 一个类似数组的 File 对象序列。 (思考或从桌面拖动文件目录)。
    3. Blob - 允许将文件分割成字节范围。

    当与上述数据结构结合使用时,FileReader 接口可用于通过熟悉的 JavaScript 事件处理异步读取文件。因此,可以监视读取的进度、捕获错误并确定加载何时完成。在许多方面,API 类似于 XMLHttpRequest 的事件模型。

    首先要做的是检查您的浏览器是否完全支持 File API:

    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      // Great success! All the File APIs are supported.  
    } else {
      alert('The File APIs are not fully supported in this browser.');
    }
    

    接下来,处理文件选择:

    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
    
    <script>
    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
    
      // files is a FileList of File objects. List some properties.
      var output = [];
      for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                    f.size, ' bytes, last modified: ',
                    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                    '</li>');
      }
      document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }
    
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    

    要读取文件,请像这样扩展 handleFileSelect:

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
    
      // Loop through the FileList and render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {
    
        // Only process image files.
        if (!f.type.match('image.*')) {
          continue;
        }
    
        var reader = new FileReader();
    
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
          return function(e) {
            // Render thumbnail.
            var span = document.createElement('span');
            span.innerHTML = ['<img class="thumb" src="', e.target.result,
                              '" title="', escape(theFile.name), '"/>'].join('');
            document.getElementById('list').insertBefore(span, null);
          };
        })(f);
    
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
    }
    
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    

    最后,这是文件规范:http://www.w3.org/TR/file-upload/

    【讨论】:

      【解决方案2】:

      可以通过设置--allow-file-access-from-files标志来完成。

      不是正常打开Chrome,而是运行:

      path\to\your\chrome\installation\chrome.exe --allow-file-access-from-files
      

      Source.

      【讨论】:

      • 并非没有更多的工作。您必须编写一个后端,该后端从您创建的某个网页中获取新数据并将其写回文件。
      • 这在 Ubuntu 16.04 上使用 Chrome 63.0.3239.132(64 位)时不再有效。
      猜你喜欢
      • 2015-04-27
      • 2013-12-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-24
      • 2019-02-27
      相关资源
      最近更新 更多