使用變量上傳Javascript文件

編輯：我不想保存到文本文件....我希望用戶能夠選擇他們自己的文件並使用該文件中的變量。使用變量上傳Javascript文件

我想讓用戶上傳自己的「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>

請幫忙。

來源

2017-07-29 jmcall10

並不清楚你要求 – CodeWizard

不是加載「settings.js」文件什麼的，我想因此用戶要上傳的文件能夠使用他們的變量。 – jmcall10

[使用JavaScript在服務器上保存文本文件]可能的副本（https://stackoverflow.com/questions/15722765/saving-a-text-file-on-server-using-javascript） – Nico

此代碼將運行存儲在您的JS文件中的JavaScript。使用以文本形式讀取文件，並使用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); \t 
 
    } else { 
 
     document.innerText = "File not supported!" 
 
    } 
 
});

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

來源

2017-07-29 11:12:37

這樣的事情也許

document.getElementById("settings").addEventListener("change", function(){ 
 
if(this.files[0] && this.files[0].type == "text/javascript"){ 
 
    \t 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; 
 
     } 
 
    \t reader.readAsDataURL(this.files[0]); 
 
    } 
 
});

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

來源

2017-07-29 11:13:49 keja

這是給你一個完整的工作代碼。它將讀取文件並將其作爲文本打印在屏幕上進行調試，並將該文件作爲腳本文件添加到頁面中。

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

來源

2017-07-29 11:13:54 CodeWizard

使用變量上傳Javascript文件

回答

相關問題