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?
Related
I am using this code to download these Images but This programming making a txt files with these names and with type jpeg . why this is happening ? this programm is not working on chrome due to cross site but on firefox in zip file empty txt files are.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js" type="text/javascript">
</script>
<script>
var urls = [
"https://s3.amazonaws.com/ais-django/Events/Test1/DSC_0397.jpg",
"https://s3.amazonaws.com/ais-django/Events/Test1/DSC_0398.jpg",
"https://s3.amazonaws.com/ais-django/Events/Test1/DSC_0488.jpg"
];
var nombre = "Zip_img";
//The function is called
compressed_img(urls, nombre);
function compressed_img(urls, nombre) {
var zip = new JSZip();
var count = 0;
var name = nombre + ".zip";
urls.forEach(function(url) {
JSZipUtils.getBinaryContent(url, function(err, data) {
if (err) {
throw err;
}
zip.file(url, data, {
binary: true
});
count++;
if (count == urls.length) {
zip.generateAsync({
type: 'blob'
}).then(function(content) {
saveAs(content, name);
});
}
});
});
}
</script>
</body>
</html>
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.
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.
Javascript newbie here. I have a javascript function that works nested in an html file, I import an external library abaaso, then declare the function and then call it:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script src="abaaso.js"></script>
</head>
<body>
<script>
var baseurl = "https://example.com";
var baseapi = baseurl + "/api/v1/";
var api_username = "user";
var api_key = "key";
var credentials = "?api_username=" + api_username + "&api_key=" + api_key;
var rawdata = {};
(function ($$) {
/* login */
login = function(username, password) {
var calledUrl = baseapi + "user/login/" + credentials;
calledUrl.post(
function (content) {
/*console.log("success" + JSON.stringify(content, null, 4));*/
},
function (e) {
console.log("it failed! -> " + e);
},
{
"username": username,
"password": password
},
{"Accept" : "application/json"}
);
}
})(abaaso);
login('test#example.com', 'passwd');
</script>
</body>
</html>
I want to put it in an external .js file and import it and only use the call to the function login('test#example.com', 'passwd');. I don't want to import abaaso from the html file but from the new .js.
How can I do that? Is there a particular structure to respect? Do I need to create a global function to the js file?
I don't want to import abaaso from the html file but from the new .js.
You can't do that. However, you can import both abaaso and the new .js:
<head>
<title>title</title>
<script src="abaaso.js"></script>
<script src="new.js"></script>
</head>