Question

我正在使用JS创建模块！我已经上传了HTML文件，并在div上显示了innerHTML。一切都正常显示，但是缺少head和body标签！

有人可以帮我吗！任何形式的帮助都将非常可贵

function saveText(ref, fname, text, mime)
{
  	var blob = new Blob([$('#result').html()], {type: "html/plain;charset=utf-8"});
    saveAs(blob, $('#fname').val() + '.html');
}

function fileValidation(){
	var fileInput = document.getElementById('file');
	var filePath = fileInput.value;
	var allowedExtensions = /(\.html)$/i;
	if(!allowedExtensions.exec(filePath)) {
	    alert('Please upload file having extensions .html only.');
	    fileInput.value = '';
	    return false;
	}

	else {
	    if (fileInput.files && fileInput.files[0]) {
	        var reader = new FileReader();
	        var input = event.target;
		       reader.onload = function(){
			    var text = reader.result;
			    document.getElementById('result').innerHTML = reader.result;
			  };
			  reader.readAsText(input.files[0]);
	    }
	}

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zip</title>

  <!-- Bootstrap CSS
  ==================== -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- Custom Stylesheet 
    ===================== -->
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Zip With Few Clicks</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Track ID Removal<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">UTM Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Image Folder Structure</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Replace Images</a>
        </li>
        <form onsubmit="return saveText()" class="d-flex align-items-center">
          <div class="saveblock" class="pull-right"> 
            <input id="fname" type="text" placeholder="filename" class="form-control"><span>.html</span>        
            <button class="btn btn-sm btn-dark" type="submit" role="button">Save</button>
          </div>
        </form>
      </ul>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row mt-5">
      <div class="col">

        <div class="input-group mb-3">
          <div class="input-group-prepend">
          </div>
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="file" onchange="return fileValidation()">
            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
          </div>
        </div>

        <!-- Output Div -->
        <div id="result" contenteditable="true"></div>
      </div>
    </div>
  </div>

  <footer class="text-center bg-light pt-3 pb-2">
    <p>
      &copy;All rights reserved
    </p>
  </footer>

  <!-- jQuery CDN
    =============== -->
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/filesaver.js/0.2/FileSaver.min.js"></script>
  <!-- Custom Script 
    ================ -->
  <script src="assets/js/script.js"></script>
</body>
</html>

无法使用JS正确读取文件

0 个答案: