使用变量上传Javascript文件
[英]Upload Javascript file using variables
问题描述
EDIT: I do not want to save to a text file.... I want the user to be able to select their own file and use the variables within that file. 
编辑：我不想保存到文本文件...。我希望用户能够选择自己的文件并使用该文件中的变量。
I would like to have the user upload their own "settings.js" file and then the page use the variables once loaded. 我想让用户上传自己的“ settings.js”文件，然后页面在加载后使用变量。
How would I change my code to reflect this? 我将如何更改代码以反映这一点？
At present I have the following javascript file and HTML code: 目前，我有以下javascript文件和HTML代码：
Javascript File: settings.js Javascript文件：settings.js
var myVariable = 6000;
HTML file: index.html 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>
Please help. 请帮忙。
3 个解决方案
解决方案1
0 2017-07-29 11:12:37
This code will run javascript stored in your JS file. 此代码将运行存储在您的JS文件中的javascript。 Use FileReader() to read file as text, and use eval(content); 使用FileReader()以文本形式读取文件，并使用eval(content); to execute that code. 执行该代码。 If you can execute JavaScript you can do anything you want. 如果您可以执行JavaScript，则可以做任何您想做的事情。 Use only variables, or anything else. 仅使用变量或其他任何变量。
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">
解决方案2
0 已采纳 2017-07-29 11:13:49
something like this maybe 像这样的东西
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>
解决方案3
0 2017-07-29 11:13:54
Here is a full working code for you. 这是您的完整工作代码。 It will read file and print it as text for debugging on the screen and will add the file as script file to the page as well. 它将读取文件并将其打印为文本以在屏幕上进行调试，并将文件作为脚本文件添加到页面中。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.