Greetings Fellow Stackers,
I have a property file "demo.properties" which contains key - value pair:
Build=47
I also have an HTML (static) page 'demo.html'
<html>
<body>
The current build is: <!--here I want the value of build from the demo.properties -->
</body>
</html>
Is there a way to access the value the 'Build' value here? Any suggestions would be very much appreciated.Thanks!
You can use javascript to read your file and then split the text read from demo.properties file on "=" just to get the build version.
var readFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var result = reader.result;
var outputDiv = document.getElementById('output');
outputDiv.innerText = "The current build is: " + result.split("=")[1];
};
reader.readAsText(input.files[0]);
};
Working plnkr is: Plnkr
Related
I'm trying to get the file blob using the following function:
$('body').delegate('[id^="prod_img"]', 'click', function()
{
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = $('#prod_img' + id).files[0]; // <- what's the solution here
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
but I get a cannot read property '0' of undefined error. I know the answer is probably on the web, I just have difficulty conceiving the correct search term. Anyway, will you assist me here? I usually code
var file = event.target.files[0];
and I now don't know how to get the event here. Thanks.
UPDATE
The markup for the input element looks like so:
<input accept="image/*" title="Choose an image with a 250 x 300 pixel resolution." data-id="2" name="prod_img2" id="prod_img2" type="file" >
var selectedFile = $('#prod_img' + id).files[0];
files is a property of a DOM element, not a jQuery object. You need to extract the DOM element from the jQuery object that wraps it:
$('#prod_img' + id)[0].files
I got my code to work by adding an event variable like so:
$('body').delegate('[id^="prod_img_"]', 'change', function(event)
{
event.preventDefault();
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = event.target.files[0];
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
I'm trying to make an app that allows you a text editor. You can type anything in to a text block. You can do two things with said text block:
a) run the text as an html page in a new about:blank tab or
b) save the text as a .html
For some reason, though, when I tried to implement the save ability, neither function would load. If I go into the JS console, it shows me this error upon clicking on the save button:
"Uncaught ReferenceError: saveAsFile is not defined (temp.html,1)"
When I seperated them into two <script> blocks, I could get the save function to work. However, when I did that, the Run in New Tab function no longer worked. It was utterly confusing.
I have used multiple functions before, and I don't know why it's suddenly not working. Can someone help? This is my code:
<script>
function run() {
var codeTab = window.open("" _blank);
var codeRun = document.getElementById("code").value;
codeTab.document.write(codeRun);
}
</script>
<script>
/*i stole-i mean used-this code from someone else*/
function saveAsFile() {
var textToSave = document.getElementById("code").value;
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'save.html';
hiddenElement.click();
}
</script>
On line 3, you have window.open("" _blank);. It should be window.open("_blank");.
I also cannot see anywhere saveAs() is being called (or defined). Is it possibly being called in codeRun? See below code which worked for me.
<textarea id="code">
</textarea>
<button onclick="run();">Run</button>
<button onclick="saveAsFile();">Save</button>
<script>
function run() {
var codeTab = window.open("_blank");
var codeRun = document.getElementById("code").value;
codeTab.document.write(codeRun);
}
/*i stole-i mean used-this code from someone else*/
function saveAsFile() {
var textToSave = document.getElementById("code").value;
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'save.html';
hiddenElement.click();
}
</script>
I am trying to parse Excel data to JSON to feed drop downs in HTML. I am having a hard time getting this to work. I have looked all over the web. I am new to javascript so i find it overwhelming.
There seems to be a lot of scripting and to make this work. If anyone can help and explain how to set this up i would be greatly appreciative.
Thanks All,
HAppleknocker
This article explained clearly how to make the JSON object from a Excel File. After getting the JSON object as a string you can use it to do anything.
In here used sheet js and sample javaScript code available on GitHub.
How to convert Excel data into JSON object using JavaScript
<script>
$(document).ready(function(){
$("#fileUploader").change(function(evt){
var selectedFile = evt.target.files[0]; //Get the ExcelFile
var reader = new FileReader();
reader.onload = function(event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
document.getElementById("jsonObject").innerHTML = json_object;
})
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsBinaryString(selectedFile);
});
});
</script>
Say I've got a reference to a html file as a Blob b and I create a URL for it, url = URL.createObjectURL(b);.
This gives me something that looks like blob:http%3A//example.com/a0440b61-4850-4568-b6d1-329bae4a3276
I then tried opening this in an <iframe> with a GET parameter ?foo=bar, but it didn't work. How can I pass the parameter?
var html ='<html><head><title>Foo</title></head><body><script>document.body.textContent = window.location.search<\/script></body></html>',
b = new Blob([html], {type: 'text/html'}),
url = URL.createObjectURL(b),
ifrm = document.createElement('iframe');
ifrm.src = url + '?foo=bar';
document.body.appendChild(ifrm);
// expect to see ?foo=bar in <iframe>
DEMO
I don't think adding a query string to the url will work as it essentially changes it to a different url.
However if you simply want to pass parameters you can use the hash to add a fragment to the url
ifrm.src = url + '#foo=bar';
http://jsfiddle.net/thpf584n/1/
For completeness sake, if you want to be able to reference a blob that has as question mark "query string" indicator in it, you can do so in Firefox any way you choose, such as: blob:lalalal?thisworksinfirefox
For Chrome, the above will not work, but this will: blob:lalalla#?thisworksinchromeandfirefox
And for Safari and Microsaft, nothing really works, so do a pre test like so, then plan accordingly:
function initScriptMode() {
var file = new Blob(["test"], {type: "text/javascript"});
var url = URL.createObjectURL(file) + "#test?test";
var request = new XMLHttpRequest();
request.responseType = responseType || "text";
request.open('GET', url);
request.onload = function() {
alert("you can use query strings")
};
try {
request.send();
}
catch(e) {
alert("you can not use query strings")
}
}
If you are doing this with a Javascript Blob for say a WebWorker then you can just to add the parameters into the Blob constructor as a global variable:
const parameters = 'parameters = ' + JSON.stringify({foo:'bar'});
const body = response.body; // From some previous HTTP request
const blob = new Blob([parameters, body], { type: 'application/javascript' });
new Worker(URL.createObjectURL(blob));
Or more general case just store the original URL on the location object
const location = 'location.originalHref = "' + url + '";';
const body = response.body; // From some previous HTTP request
const blob = new Blob([location, body], { type: 'application/javascript' });
new Worker(URL.createObjectURL(blob));
You could also do this with HTML if you can add them say to the root <HTML> tag as attributes or use the <BASE> element for the url or insert them as a script tag but this would require you to modify the response HTML rather then just prepend some extra data
Now I have a form field:
<input id="my_img_field" type="file"/>
After I select the image in the browser, I want to render the selected image file on the target img tag:
<img id="image_preview" />
But I want to do this after the $('#my_img_field').change event, i.e. I may want this done when I click some button later.
I heard that this could be done using HTML5 technique. Can someone teach me how?
the code in vanilla js
var file = document.getElementById('my_img_field').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
var img = document.getElementById('image_preview')
img.src = this.result
}
The following approach will work:
var file = $('#my_img_field')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = $('#image_preview');
img.attr('src', this.result);
}
It can be like this
const file = document.getElementById('my_img_field').files[0]
const link = window.URL.createObjectURL(file)