Question

我正在尝试使用<embed src = "full path"获取我在网页中预览的文件的详细信息。我只找到了与我想要的不匹配的输入标记方式。

这是我的HTML：

<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body" onclick="return myFunction1('0')">Capture.PNG</div>
<div class="panel-body" onclick="return myFunction1('1')">Sample2.PDF</div>

这是我的JavaScript：

<script type="text/javascript">
  function myFunction1(index) {
    var parent = $('#demo').parent();
    if (index == '0') {
      $('#demo').remove();
    $("h2").append("<embed id = 'demo' src='http://localhost:8080//Part2/Capture.PNG' width='500' height='600'>");
    }
    if (index == '1') {
      $('#demo').remove();
    $("h2").append("<embed id = 'demo' src='http://localhost:8080//Part2/sample2.pdf' width='500' height='600'>");
    }
  }
</script>

所以基本上，点击Capture.PNG / sample2.pdf后，页面中会显示预览空间，显示文件内容。

Answer 1

您应该能够通过Ajax请求获取File API中的所有可用信息，但您显然需要将您的文件托管在跨源兼容域上：

let url = 'https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg';

// do a HEAD request so we don't download the whole file
fetch(url, {method: 'head'})
.then(grabFileInfo)
.then(console.log)
.catch(console.error);

function grabFileInfo(response) {
  // just in case...
  if(!response.ok) {
    throw new Error('Error while fetching data');
  }
  // grab the response headers
  let headers = response.headers,
    // 'last-modified' should be in a string format
    lastModif = new Date(headers.get('last-modified'));
  return {
    // the name should be in the url
    name: response.url.substring(url.lastIndexOf('/')+1),
    type: headers.get('content-type'),
    lastModified: lastModif.getTime(),
    lastModifiedDate: lastModif,
    size: +headers.get('content-length')
  };
}

或使用XHR API：

var url = 'https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg';
var xhr = new XMLHttpRequest();
xhr.onload = grabFileInfo;
xhr.onerror = console.error;
xhr.open('HEAD', url);
xhr.send();

function grabFileInfo(xhrEvent) {
  var xhr = xhrEvent.target,
    lastModif = new Date(xhr.getResponseHeader('last-modified'));
  console.log({
    name: xhr.responseURL.substring(url.lastIndexOf('/') + 1),
    type: xhr.getResponseHeader('content-type'),
    lastModified: lastModif.getTime(),
    lastModifiedDate: lastModif,
    size: +xhr.getResponseHeader('content-length')
  });
}

使用文件系统的完整路径获取没有输入标记的文件详细信息

1 个答案: