I'm trying to load an image to a div background using the following file structure in the root.
WebContent --
|
zharaimages --
|
[ItemID] --
|
Image.jpg
This is done by jQuery and the file structure is inside the root. The ItemID folder is dynamic and I have to check whether the path exists using jQuery and if the path is not valid, I should go to a default path to fetch the default image. How can I check the path is valid using jQuery. I'm hoping to this can be done without an ajax call.
Can any one help me on a tutorial or an API I can use for this!
UPDATE
The files are on the server. The concept I have is that I have 100s of item elements & I want to load an image for each item element. The images are saved in the server ( a local host ) and the folder hierarchy is divided using the item ID as shown. What I want to do is check whether the image file exists before appending it to the background of the item element div. Is this possible. This is a web application developed using spring.
In simple way you cannot. It is because JavaScript cannot access folders on server side. The only way you could try to check is to invoke $.get in which you pass url to image and handle error if image does not exist. You cannot try to get only folder because if folder listing is disabled you will always get error
you can bind error handler on your image tag, and if error receive you can load your default image.
$('#imgElementID').error(function() {
$(this).attr('src', 'images/DEFAULT.JPG');
});
without hitting URL you cannot get to know if image exist or not
Related
I'm trying to display a static image located in the same folder as my Html file but it seems I can't get the right path for it to display correctly. The application I'm developing is an atlassian plugin that also includes a java backend to get Data from the Database and I'm displaying it on the frontend using HTML and javascript, the whole application runs on a webserver as a Plugin. Both the image and the Html file are located in here: D:\clone4\project\src\main\resources\templates\scheduleraction
The URL path for the web application is:
https://staging.com/jira/secure/SchedulerAction!default.jspa
I tried many ways and this is the last one :
<img src="/SchedulerAction!default.jspa/piechart.jpg" alt="pie-chart">
I need to add the correct path in the "src" so the client can retrieve the image from my Files on the webserver. I would love any hint or help!
you should use exact path like ./Image.png. And avoid using Images out of the static HTML file located directory
Try to use a service to upload that image and use the provided url.
Such as https://imgur.com/. After upload it, use into the src the correct url with the filetype extension.
I am going to deploy this page on an FTP
And I need to find out how I can detect the html file currently being viewed using JavaScript.
If I open the html file, it works just fine with this:
var fileName = location.href.substring(location.href.lastIndexOf("/") +1);
But, if I open it via my localhost adress, it has a null value. So I'm guessing I have to use some other method to extract the current html file name. Or is there a better approach to this?
Note: I am not going to use JQuery or anything like that.
EDIT:
I can get the filename if it isn't my index file.. If it's the index file I get nothing using the above code. Most likely since all I have in my adress bar is the localhost adress of the live-server?
The web deals in URLs, not file names.
Sometimes a URL will include something that looks like a file name, and sometimes that even maps on to a real file name on the server's hard disk.
When you type http://example.com/ then it might map that onto a file called index.html. Or maybe on to index.php. Or maybe it won't touch any file but will just use logic built into the web server application to determine what to respond with.
There's no way to know in the general case.
If your specific case, you know that the path / maps onto index.html, so you can write an explicit mapping in your JavaScript code.
I am using Responsive FileManager extensively as a standalone (not part of a general text editor). I sometimes call it multiple times on one page. However, each time I want it to be restricted to a certain folder—not merely so it defaults to a folder, but so the user can't navigate to any other folders at all.
The only way I have found to restrict a folder in Responsive FileManager is by setting the PHP sesssion variable:
$_SESSION['RF']['subfolder']
However, this is a problem for different folders that need to be there on the same page, and in general it's impractical because the restriction should be specific to the file manager call, not user-specific like a session. Also, I don't need it to be absolutely impossible to navigate to other folders in a secure way, it's OK if someone who knows how to use the browser debugger navigates somewhere else. I merely want to prevent casual users from doing this.
Is there any way to do this with a JS config option, or some other per-call and not per-user way?
Their feature list says:
You can set a subfolder as the root and change the configuration for each user, page or FileManager call.
But I was not able to find a per-call folder restriction in their docs.
Here is a simple tweak to achieve this .
Responisve filemanager calls the dialog.php with some parameters appended like type .What I did is : introduce a new param and put a check for that on the server side to set the uploads path dynamically .
Consider your uploads directory is uploads
and you have user1 , user2 , user3 as sub directories , So , in that case we will be setting the uploads path and current path in the config.php dynamically from the parameters which we will be passing while calling the dialog.php
In the filemanager/config/config.php
Append these lines
if( isset( $_GET['MY_UPLOAD_PATH']))
{
$config['upload_dir'] = $config['upload_dir'] . $_GET['MY_UPLOAD_PATH']."/" ;
$config['current_path'] = $config['current_path'] . $_GET['MY_UPLOAD_PATH']."/" ;
}
In the filemanager/dialog.php
Find this line
$get_params = http_build_query($get_params);
And just before that line add
if(isset($_GET['MY_UPLOAD_PATH'])){
$get_params['MY_UPLOAD_PATH'] = $_GET['MY_UPLOAD_PATH'] ;
}
Now change your variable
$data['file_explorer'] = base_url('assets/resources/filemanager/dialog.php?type=0');
to
$data['file_explorer'] = base_url('assets/resources/filemanager/dialog.php?type=0&MY_UPLOAD_PATH=user1');
Just change the value of the MY_UPLOAD_PATH param and the dialog.php will show only that particular directory .
I know the .htaccess file can do all forms of magic. I have folders that have video files in them and would like clicking the file to open them within a html5 video tag in the same browser window. What would be the easiest way to accomplish this?
It's important to note that I do not have access to server side scripting. I assume that the following should be possible in one way or another:
Read the names of the files in the current directory from the DOM, since the filenames are listed in the HTML generated by Apache.
Add some form of event handler to the filename links.
Use jQuery or whatever to generate an overlay div with the video tags when a file is clicked.
I couldn't find anything that works directly with google, but I assume I'm not the first one that tries to do something like this.
You can use jQuery to do a AJAX GET request and get the Apache Directory Listing. You can put this list into a container and add some custom events on the links, for example.
Something like this:
$.get("/dir/with/apache/listing/", function(data) {
var directoryListing = $(data);
// Add to a container or something
$("#VideoList").append(directoryListing);
$("#VideoList a").on("click", function(ev) {
ev.preventDefault(); // Stop default action (download)
alert($(this).attr("href")); // Video link
return false;
});
});
Please note that AJAX requests only work on the same domain. It would also require you to create some sort of a page to put this script on.
I was wondering if it is possible in JS to open a directory, read an image file and display it to Html? I believe JS restricts from being able to open any file in a directory directly, but what I want is:
I have a XML file which will contain the path to a image file in the web server root folder
so my hierarchy is like this
webserver root folder--->|
html
js
css
images
xml
, and I will use XmlHttpRequest and feed the directory tag and file name tag to my JS file which has to display the image to my frame in the Html page.
[My image is also in the same webserver root folder but in a different folder from html]
Any pointers on how to go about it? I guess we can store the image file also in XML as a base64 encoded data, but that would make the data exchange huge, also don't know if this is a ideal method (is it? please suggest)
Please give me some tips for this.
Thanks
Balaji R
JavaScript does not have access to filesystem on server, since it runs on the client side.
But with JavaScript or Ajax you can call some php code on server which will read the image from the file system and then it will pass this image back to the JavaScript.
I have described here how to do this.
If I am following you correctly, example.com/js/somefile.js is trying to access something like example.com/images/image.jpg?
If so then i would either use the absolute URL of the image:
"http://www.example.com/images/image.jpg" or the relative path "../images/image.jpg"
When referencing the images in your code you could actually use a plain text file, one image path per line. Then in your onreadystatechange function:
pictures = var.responseText.split("\n");
now pictures is an array of picture paths.
JavaScript only has access to the information & priviledges that the browser has access to, so unless the image is in a directory that would normally be accessible on the web site, you're not going to have much luck using just JavaScript.
Is there any way that you can make the path in the filesystem available to the web document root folder? Maybe by using an Alias or Symlink?