I have the following line to display an image:
$output .= '<div><img src="C:/backup/images/000001_full.jpg"></div>';
($output is then put into an html file as a local backup). When I view the page with IE, the image is displayed fine, but not with firefox.
Any idea why?
Thanks,
Dave
I think you want:
$output .= '<div><img src="file://c:/backup/images/000001_full.jpg"></div>';
You need to close your img tag. So,
$output .= '<div><img src="C:/backup/images/000001_full.jpg" /></div>';
IE likes to play it kind of loose with HTML specs, but Firefox pays more attention to the standards.
Maybe because your src is not valid urlfor Firefox.
Have you tried file://c:/backup/images/000001_full.jpg ?
Why are you using a link to the file system location?
The image should be part of the site, and should be linked to as a relative URL such as \images\000001_full.jpg.
use relative path. i am also not sure but Something like $output .= '<div><img src="../images/000001_full.jpg"/></div>'
I reproduced this problem. The image displays in IE (and Chrome), but not in Firefox. The reason is because local files can't be accessed directly. Prefix the src tag with file:/// and it will work just fine as in:
$output .= '<div><img src="file:///C:/backup/images/000001_full.jpg"></div>';
It is not straight forward in Chrome and firefox.
Modern browsers due to security reasons do not allow you to show image from file system.
Steps:
1. set variable where your input type file is defined
HTML : <input type="file" id="image-input"/>
var fileInput = document.getElementById('image-input');
Get temporary file URI:
var uri = window.URL.createObjectURL(fileInput.files[0]);
Pass this Uri to the image src from Javascript. Problem solved.
Follow this link for help:
http://www.philliphaydon.com/2014/04/loading-an-image-or-video-from-a-file-input-control/
Related
I've an image that I want to download on IE. After looking at Google and several stackoverflow questions I found that the best solution for the other common browsers is the HTML5 download attribute:
<a href="/barImage.jpg" target="_blank" download>Foo</a>
But this attribute is not currently supported on IE. And it just opens a new tab with the image on IE (Because it's a known file extension)
Is there any way to force the download of an image file just using html and without zipping it or any other method of this kind?
Please don't indicate javascript libraries.
I think you will not get far without JS.
Microsoft supports this tag from the Edge browser. Do you really need it for older versions?
I just read something else. You can try to fill the download attributes with a filename, so:
... download="sample.png" ...
I found this Codesnippet (force browser to download image files on click):
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'sample.jpg';
document.body.appendChild(link);
link.click();
But I´m not sure, if this is correct...
I upload image to server and try to load it in different browsers.
I'm using this type of code:
<img alt="Name2.jpg" src="http://www.website.net/addVid/maker/Name2.jpg">
This is result:
Chrome: Working fine.
Opera: Working fine.
IE10: square with cross.
Mozilla: says " The image blablabla.....cannot be displayed because it contains errors.
I have NO idea why it's happens.. any suggestions?
URL provided in src is not valid
src="http://pcplacements.com/wp-content/uploads/Hello-Picture.gif"
once try this.
The link that you provided is invalid however I am assuming that you did not want to post the actual URL for whatever reason.
Why are you trying to load the image via URL, just import the image over to your server and then access it:
<img alt="Name2.jpg" src="FileDirectory/Name2.jpg">
problem is with the image. the image only contains the error, once replace the image and try again, i am sure it will.
Definitely.
I´m trying to use the 'download' attribute of a href to rename a file without extension, but it doesn't work.
<a href="/fileWithoutExtension" download="newName.pdf">
I tried with IE, Chrome and FF.
Any thoughts?
Thanks,
The download attribute only works in Chrome 14+ and Firefox 20+ so this May explain why you are not getting this to work. I suggest you do not use it as it is not yet widely used. Prefer some other alternatives.
You can check that your attribute is supported with this javascript code, taken from here : http://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/
var a = document.createElement('a');
if(typeof a.download != "undefined")
{
// download attribute is supported
}
else
{
// download attribute is not supported
}
If you want to change the filename then just use a server-sided PHP script:
<?php
header('Content-type: application/pdf');
header('Content-Disposition: attachment; filename="newFile.pdf"');
echo file_get_contents("your_original_file");
?>
and make your link like this
I've setup a download link on the site I'm building so that when users sign up to the musicians mailing list they can download a track for free. With this current code:
click here to download
It works in Firefox when you click the link it opens a window asking if you'd like to download but in Chrome it streams the track. If I change the file to .ogg then the reverse happens - I can download in Chrome but it streams in Firefox. Guess this is happening because I'm providing a format that the browser is capable of streaming. So how do I stop it streaming? can I provide two href's?
Having looked for similar questions here I came across the html5 attribute which can be added to links download="filename.mp3" I've tried this:
click here to download
But still it keeps streaming in Chrome, any ideas? help please?
Can you zip the file? that'll avoid the streaming.
OTHER OPTION
Other option a little of PHP :
<?php
$file = $_GET['file'];
header ("Content-type: octet/stream");
header ("Content-disposition: attachment; filename=".$file.";");
header("Content-Length: ".filesize($file));
readfile($file);
exit;
?>
and then
Download the mp3
Can you try the below code?
download
I think, it will work on all browsers.
I am trying to offer a download option of videos on my site.
I have direct links (which have .mp4/.webm ending) available for download (they are not hosted on my server if that matters).
This is what I tried:
<a href="http://stream.flowplayer.org/bauhaus/624x260.webm" download>Download</a>
It only works on chrome, in FireFox it will just open the video on the browser itself.
You need a wrapper script which sets the Content-Type Content-Disposition headers appropriately, and outputs the file you want to serve.
In PHP this would be done like this:
Filename: 624x260.php
<?php
// We'll be outputting a webm video
header('Content-type: video/webm');
// It will be called downloaded.webm
header('Content-Disposition: attachment; filename="download.webm"');
readfile('624x260.webm');
?>
You would then link to the PHP file instead, as follows:
Download
if you happen to have an apache server where you can edit the .htaccess file, add this line.
AddType application/octet-stream .webm
If you wish to not do this, you could do this through php as well.
PHP Code:
<?php
$file = $_GET['file'];
header ("Content-type: octet/stream");
header ("Content-disposition: attachment; filename=".$file.";");
header("Content-Length: ".filesize($file));
readfile($file);
exit;
?>
HTML Code:
Download the mp3
HTML5 adds the download attribute, which you have there in your example, but is empty. Add a value to the download attribute and hey presto.
ie change download to download="624x260.webm" in your a tag.
http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
For non-HTML5 compliant browsers, the most straightforward way would be to accompany the links with a direction to 'right click to download'. This would cover the majority of cases and browsers.
An overview of a couple of techniques here, I realise you can't zip the files.
http://webdesign.about.com/od/beginningtutorials/ht/download_link.htm
There are multitude more involved ways to do this, including modifying the web server config, but not everyone has the access / know-how to do that.
Note: The download attribute is supported in Chrome 14+ and Firefox 20+.
As an alternative for other browsers, you can use jQuery plugin from here
http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/4
OR
http://jqueryfiledownload.apphb.com/
You can make it downloadable like
Download
$(document).on("click", "a.download", function () {
$.fileDownload($(this).prop('href'))
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
return false;
});