Question

编辑：我不想保存到文本文件....我希望用户能够选择自己的文件并使用该文件中的变量。

我想让用户上传自己的“settings.js”文件，然后页面会在加载后使用变量。

我如何更改代码以反映这一点？

目前我有以下javascript文件和HTML代码：

Javascript文件：settings.js

var myVariable = 6000;

HTML文件：index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Load Javascript file</title>
</head>


<body>

    <script src="settings.js"></script>


    <div>

        <script>
            alert(myVariable)
        </script>

    </div>

</body>

</html>

请帮忙。

Answer 1

此代码将运行存储在JS文件中的javascript。使用FileReader()将文件作为文本读取，并使用eval(content);执行该代码。如果您可以执行JavaScript，您可以执行任何操作。仅使用变量或其他任何内容。

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var textType = /text.*/;
    
    if (file.type.match(textType)) {
        var reader = new FileReader();
        
        reader.onload = function(e) {
            var content = reader.result;
            //Here the content has been read successfuly
            eval(content);
            
        }
        
        reader.readAsText(file);	
    } else {
        document.innerText = "File not supported!"
    }
});

<input type="file" id="fileInput">

Answer 2

这样的事可能

＆＃13;

document.getElementById("settings").addEventListener("change", function(){
if(this.files[0] && this.files[0].type == "text/javascript"){
    	var reader = new FileReader();
      reader.onload = function (e) {
         var settings = e.target.result.split("data:text/javascript;base64,")[1];
         eval(atob(settings));
         
         //use the loaded var's
         document.getElementById("result").innerText = myVariable;
      }
    	reader.readAsDataURL(this.files[0]);
    }
});

＆＃13;

<input type="file" id="settings">
<div id="result"></div>

＆＃13;

Answer 3

这是一个完整的工作代码。它将读取文件并将其作为文本打印在屏幕上进行调试，并将该文件作为脚本文件添加到页面中。

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<script>


function loadScript() {
  var inputFile = document.querySelector("#scriptFile"),
  
  // Get the selected file
  file = inputFile.files[0], 
  
  // HTML5 File API 
  fileReader = new FileReader();
 
  // Add the onload event to the file 
  fileReader.onload = printFile;
  
  // Read the file as text
  fileReader.readAsText(file);
  
  function printFile( reader ) {
  
    // Get the text of the file
    var content = reader.target.result,
        script;

    // Add the fileContent as script to the page
    script = document.createElement('script');
    script.textContent = content;
    document.body.appendChild(script);

    ///////////////// DEBUG

    var pre = document.createElement('pre');
    pre.textContent = content;
    document.body.appendChild(pre);
    }
  }

</script>
</head>
<body>
    <input type='file' id='scriptFile'>
    <input type='button' value='Load' onclick='loadScript();'>
</body>
</html>

＆＃13;

使用变量上传Javascript文件

3 个答案: