使用变量上传 Javascript 文件答案

【问题标题】：Upload Javascript file using variables使用变量上传 Javascript 文件
【发布时间】：2018-01-05 09:14:37
【问题描述】：

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

我想让用户上传他们自己的“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>

请帮忙。

【问题讨论】：

不清楚你要求什么
我希望用户上传文件而不是加载“settings.js”文件，以便能够使用他们的变量。
Saving a text file on server using JavaScript的可能重复
所以你希望用户上传文件（AJAX）而不是使用它。你需要NPAPI的服务器端代码来做这件事。 NPAPI 已弃用
Reading local files with <input type="file">?的可能重复

标签： javascript jquery html variables

【解决方案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!"
    }
});

&lt;input type="file" id="fileInput"&gt;

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

可能是这样的

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]);
    }
});

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

【讨论】：