I want to get pictures from a local folder and post them on a webpage.
Pictures aren't loading on webpage but no errors in console.
<head>
<title> </title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var dir = "/Users/me/Desktop/imgtest/";
var fileextension = ".jpeg";
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
</script>
</head>
<body>
This can't be running cos you page isn't loading.
You should add this script before the end of your body or use $(document).ready to be sure you page is loading before to call the Ajax script.
<script type="text/javascript">
var dir = "/Users/me/Desktop/imgtest/";
var fileextension = ".jpeg";
$(document).ready(function(){
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
});
</script>
Wrap your script code in a document ready function, like so:
$(document).ready(function() {
// your code here
});
Then, run a local web server to avoid XSS issues.
Related
This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 5 years ago.
I'm sorry if I'm missing something obvious like having " instead of ' but I tried many different ways and it still does the same thing, i.e. displays the actual javascript code, instead of the functionality, when I put it inside a .html file or gives me this error:
Parse error: syntax error, unexpected '<' in E:\XAMPP\htdocs\website2\test.php on line 9
When I place it inside of a php file.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script src="js.js" type="text/javascript"></script>
<title>TEST</title>
</head>
<body>
<?php
echo '<script type="text/javascript">
var https = require("https");
var username = "04d2ac7f76a0fbc0eee9dc5ef96b9259";
var password = "dc70ffc7ad911236bc2e0822855e2d42";
var auth = "Basic " + new Buffer(username + ':' + password).toString('base64');
var request = https.request({
method: "GET",
host: "api.intrinio.com",
path: "/companies?ticker=AAPL",
headers: {
"Authorization": auth
}
}, function(response) {
var json = "";
response.on('data', function (chunk) {
json += chunk;
});
response.on('end', function() {
var company = JSON.parse(json);
console.log(company);
});
});</script>';
?>
</body>
</html>
Why just not do without the php tag?
The error is because you not escape the single quotes in your code.
Example without php:
<!DOCTYPE html>
<html>
<head>
<script src="js.js" type="text/javascript"></script>
<title>TEST</title>
</head>
<body>
<script type="text/javascript">
var https = require("https");
var username = "04d2ac7f76a0fbc0eee9dc5ef96b9259";
var password = "dc70ffc7ad911236bc2e0822855e2d42";
var auth = "Basic " + new Buffer(username + ':' + password).toString('base64');
var request = https.request({
method: "GET",
host: "api.intrinio.com",
path: "/companies?ticker=AAPL",
headers: {
"Authorization": auth
}
}, function(response) {
var json = "";
response.on('data', function (chunk) {
json += chunk;
});
response.on('end', function() {
var company = JSON.parse(json);
console.log(company);
});
});</script>
</body>
</html>
Example with php:
<!DOCTYPE html>
<html>
<head>
<script src="js.js" type="text/javascript"></script>
<title>TEST</title>
</head>
<body>
<?php
echo '<script type="text/javascript">
var https = require("https");
var username = "04d2ac7f76a0fbc0eee9dc5ef96b9259";
var password = "dc70ffc7ad911236bc2e0822855e2d42";
var auth = "Basic " + new Buffer(username + ':' + password).toString(\'base64\');
var request = https.request({
method: "GET",
host: "api.intrinio.com",
path: "/companies?ticker=AAPL",
headers: {
"Authorization": auth
}
}, function(response) {
var json = "";
response.on(\'data\', function (chunk) {
json += chunk;
});
response.on(\'end\', function() {
var company = JSON.parse(json);
console.log(company);
});
});</script>';
?>
</body>
</html>
But more important this is a node.js code and not a client-side javascript.
I recommend you get some node and javascript tutorials.
You should escape ' in with \' in your code.
You're right in suspecting you've placed ' and " in improper places without escaping, as pointed out by Ivan.
<!DOCTYPE html>
<html>
<head>
<script src="js.js" type="text/javascript"></script>
<title>TEST</title>
</head>
<body>
<?php
echo '<script type="text/javascript">
var https = require("https");
var username = "04d2ac7f76a0fbc0eee9dc5ef96b9259";
var password = "dc70ffc7ad911236bc2e0822855e2d42";
var auth = "Basic " + new Buffer(username + \':\' + password).toString(\'base64\');
var request = https.request({
method: "GET",
host: "api.intrinio.com",
path: "/companies?ticker=AAPL",
headers: {
"Authorization": auth
}
}, function(response) {
var json = "";
response.on(\'data\', function (chunk) {
json += chunk;
});
response.on(\'end\', function() {
var company = JSON.parse(json);
console.log(company);
});
});</script>';
?>
</body>
Echo function is used to output the string and you are echoing a code statement which is not a valid string. Put it as in single line as:
<?php echo '<script type="text/javascript">var https = require("https");var username = "04d2ac7f76a0fbc0eee9dc5ef96b9259";var password = "dc70ffc7ad911236bc2e0822855e2d42";var auth = "Basic " + new Buffer(username + ':' + password).toString(\'base64\');var request = https.request({method: "GET",host: "api.intrinio.com",path: "/companies?ticker=AAPL",headers: {"Authorization": auth}}, function(response) {var json = "";response.on(\'data\', function (chunk) {json += chunk;});response.on(\'end\', function() {var company = JSON.parse(json);console.log(company);});});</script>';?>
I am using the code below to capture video and display it on the app.
<!DOCTYPE html>
<html>
<head>
<title>Capture Video</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"/>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/json2.js"></script>
<script type="text/javascript" charset="utf-8">
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureVideo() {
// Launch device video recording application,
// allowing user to capture only 1 video clips with 10mins duration
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 10});
}
// Called when capture operation is finished
// to display the captured video
function captureSuccess(s) {
console.log("Success");
console.dir(s[0]);
var v = "<video controls='controls'>";
v += "<source src='" + s[0].fullPath + "' type='video/mp4'>";
v += "</video>";
document.querySelector("#videoArea").innerHTML = v;
}
// This function is to upload the captured video when the user
// clicks upload video button
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
var options = new FileUploadOptions();
options.mimeType = "documents";
options.fileName = name;
options.chunkedMode = true;
ft.upload(path,
"http://www.example.com/upload.php",
function(result) {
alert('Upload success: ' + result.responseCode);
alert(result.bytesSent + ' bytes sent');
},
function(error) {
alert('Error uploading file ' + path + ': ' + error.code);
},
options);
}
</script>
</head>
<body>
<button onclick="captureVideo();">Capture Video</button> <br><br>
<div id="videoArea"></div><br><br>
<button id="uploadvid" onclick="uploadFile();">Upload Video</button>
</body>
</html>
After displaying the captured video, when the "Upload Video" button is clicked nothing happens. The video is not uploaded to the server. Meanwhile, if I replaced the captureSuccess(s) function with the following code;
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
the captured video is uploaded to the server successfully though without preview.
Please could somebody tell me what I'm doing wrong. I want the user to have a look at the captured video first before clicking the "Upload Video" button. Thanks.
The problem with your code is that the onclick="uploadFile();"is not accepting any argument but your function uploadFile(mediaFile) is expecting an argument.
<button id="uploadvid" onclick="uploadFile();">Upload Video</button>
My suggestion for solution is ,create the button element as
<button id="uploadvid" >Upload Video</button>
Write your function captureSuccess as
function captureSuccess(s) {
console.log("Success");
console.dir(s[0]);
var v = "<video controls='controls'>";
v += "<source src='" + s[0].fullPath + "' type='video/mp4'>";
v += "</video>";
document.querySelector("#videoArea").innerHTML = v;
//here you write logic when upload button is clicked
$("#uploadvid").on("click",function(){
uploadFile(s[0]);
});
}
Hi guys by using the following code I am trying to read all images from a folder and then to display them in my html file. The problem is how you can see the /images/ folder is in /fetch/ folder. When the images are displayed are loaded like /fetch/frame_1.jpg instead /fetch/images/frame_1.jpg so in this case to display them I have to use twice the images set. One in the image folder and one in the fetch folder. Can anyone explain to me why is this?
<body>
<script type="text/javascript">
var dir = "/fetch/images/";
var fileExtension = ".jpg";
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileExtension + ")").each(function () {
var fileName = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='"+ fileName + "'>");
console.log(fileName);
});
}
});
</script>
</body>
Two changes got me images.
1) remove forward/back slash from var dir.
2) combining dir and name of file.
Below is the code that worked for me:
<body>
<script type="text/javascript">
var dir = "fetch/images/";
var fileExtension = ".jpg";
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileExtension + ")").each(function () {
var fn = this.href.replace(/^.*[\\\/]/, '');
var fileName = dir + fn;
$("body").append("<img src='"+ fileName + "'>");
console.log(fileName);
});
}
});
</script>
</body>
I can't seem to get JSON when it's from an external file. When I write it inline, it works fine. But when I created a file called test.json and copied the JSON in to it, I never get the contents.
Here's my HTML and JavaScript. I should note that both HTML and JSON files are within the same folder.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>JSON Sandbox</title>
</head>
<body>
<h2>JSON Sandbox</h2>
<p id="demo"></p>
<script type="text/javascript">
var text = $.getJSON({
dataType : "json",
url : "test.json",
data : data,
success : window.alert("JSON Aquired.")
});
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone;
</script>
</body>
</html>
Here's my test.json file
{
"name":"John Johnson",
"street":"Oslo West 1",
"phone":"111 1234567"
}
Change the file extension to js.
and change the html file as below:
<!DOCTYPE html>
<html>
<head>
<title>JSON Sandbox</title>
<script src="jquery-1.8.2.min.js"></script>
</head>
<body>
<h2>JSON Sandbox</h2>
<p id="demo"></p>
<script type="text/javascript">
var obj = new Object();
var error = new Object();
$.getJSON('test.js').done(function (data) {
obj = data;
document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone;
}).error(function (err) {
error = err;
});
</script>
</body>
</html>
Your success handler is defined incorrectly.
Replace:
success : window.alert("JSON Aquired.")
With:
success : function(data){
window.alert("JSON Aquired.")
// `data` is the returned object:
document.getElementById("demo").innerHTML = data.name + "<br>" + data.street + "<br>" + data.phone;
}
You need to do what you want to do with the data, in the success handler, because $.getJSON is an AJAX call, which means it's asynchronous.
I got the snippet online:
<html>
<head>
<title></title>
<script src="jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
var dir = "";
var fileextension = ".jpg";
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileextension + ")").each(function ()
{
var filename = this.href.replace(window.location.host, "").replace("http:///", "");
$("body").append($("<img src=" + dir + filename + "></img>"));
});
}
});
</script>
</body>
</html>
But when I try to run this nothing happens. The images are in the same folder (on my Desktop) where the .html file. But can I do this with javascript, or do I need some backend like PHP/ASP.NET or something?