When we are uploading a file in html basically we write
<input type="file" />
and this code give ChooseFile button, no file chosen
But what I want is to create a Hyperlink and on clicking the hyperlink for it to work like an input of type="file" type - eg:
<a href="#" >ChooseFile</a>
any suggestions?
i think this is help to you..
<!DOCTYPE html>
<html>
<body>
<p>Click on one of the text labels to toggle the related control:</p>
<div>
<a href='#UPLOAD' >Upload a file</a>
<input type='file' name='file1'
style='cursor:pointer; opacity:0.01; alpha(opacity=1); position:relative; z-index:200; left: -10em; margin:-0.3em;' />
</div>
</body>
</html>
Don't think that you can style an input=file button beyond a certain limit,
check these links
http://www.quirksmode.org/dom/inputfile.html
Style input type file?
Or you can try a ready made plugin to do the job for you
https://github.com/blueimp/jQuery-File-Upload
Try using an existing jquery plugin for uploading files, i recommend this one:http://blueimp.github.io/jQuery-File-Upload/
Your best bet is to use a well-documented trick that will ultimately involve hiding the file input element as a child of a div that is styled to meet your needs. I say this is well documented as it is a very FAQ here on SO, and is covered on a number of other sites and blog posts on the internet.
Do not use javascript to click your file input element. You will likely run into security restrictions put in place by browsers. Some browsers may not even allow this. Others such as IE, will throw a security error when/if you attempt to send the file via javascript after using javascript to click the file input element.
If you want to avoid re-inventing the wheel, you can use a pre-built library that handles the complexity of cross-browser file uploading for you. I recommend Fine Uploader. It is well supported, quite active, and evolving quickly. Full Disclosure: I am the primary maintainer of this library.
Related
I have a file upload on my website.
<form enctype="multipart/form-data" action="post.php" method="POST">
<input id="uploadInput" name="uploadedfile[]" type="file" multiple>
<input type="submit" value="PREVIEW POST">
</form>
The code will preview this image
After a user selects the files to be uploaded it will show this image
With javascript I want a simple text to be displayed right beside it after user selection and when its uploading.
And displays upload complete when all files have been uploaded
Can the above be done with just javascript or jquery?
If yes, how?
(I just want it to be simple and just display text. I dont want a progress bar.)
Short answer yes this can be done using JavaScript.
Longer answer, there are things to be taken care of on the bankend as well front end. Instead of doing it from scratch I would suggest you can make use of Jquery-file-upload to get this done. Obviously you have not mentioned what have you tried so far. So you can look at the wiki doc on how you can get this working.
Update
I did not mention this before, but you would not be able to do this without Ajax(iFrame work around/XHR file upload) and just using JavaScript.
This is a fairly simple case, but there is a bit of work involved to make this function properly cross-browser. There are libraries out there that will take care of most of this for you. One such library is Fine Uploader. You can use Fine Uploader's "basic" mode which allows you to create your own UI and still get the benefit of all of the cross-browser uploading code that the library provides.
Full disclosure: I am the primary maintainer of Fine Uploader.
I think you want upload files with ajax, Please follow this documentation. http://www.sitepoint.com/html5-ajax-file-upload/
I have tried to enabled a banner in my opencart shop.
The site is PHP, i basically just need a banner at the top of the page to alert users that don't have JS turned on to turn it on.
i used
<noscript>
<div id="noscript-warning">We reccomend using javascript for the best viewing pleasure ></div>
</noscript>
However this does not seem to be executing.
Not getting feedback from comments, so I'll post possible issues.
You're testing with JavaScript enabled
Your CSS styling of the element is hiding the message
Your CSS styling of other elements is hiding the message
You've posted a modified example that doesn't reflect the actual code
Your trailing > is breaking the layout in whatever browser you're using to test (not likely)
You're attempting to generate the no-script element using JavaScript :P
The <noscript> tag is anecdotally deprecated (http://www.html-5.com/changes/noscript-tag.html), though I doubt that's the problem.
In any case, you can just create a script that removes a "You need Javascript enabled" div.
<div id="jserror">Enable Javascript Please!</div>
<script>
document.getElementById("jserror").style.display = "none";
</script>
Edit: an eventListener isn't even required.
i want to show file upload dialog on click of a button thats not the part of input[type="file"] how can i do this?
Basically i want to stylize the file upload control of html.
Alternate way to style file inputs using JavaScript but no Flash:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
I'm pretty sure there is no way to do this for security reasons.
You may be able to do it using a Flash-based uploader like SWFUpload. It obviously needs Flash installed and functions in a slightly different way than normal file uploads.
two days ago i was dealing with the same thing. I spotted uploadify
it allows you to have custom button for upload and ability to style your progress bar. it makes an ajax call to a php script. it also has loads of options from restricting file types/sizes/etc.
pretty happy i found it. same as pekka said this one also uses a flash gateway to do this.
document.formname.file.click() works but not in Opera i am still searching the net to solve.
I want a JavaScript with which I can change the font dynamically when the page is live (Arial to Times). But when I click Arial or Times, the page should not get refreshed. Can anyone please help me in this? Or can anyone please provide a script for this?
You should do this with javascript, not php.
Use javascript to change the style of the text dynamically. Php is run on the server, and is therefor not in the picture for your no-reload scenario.
Example
Here is the first simple example google returned (e.g. search "javascript change text font" for more examples):
<html>
<body>
<div id=hey>
<a onMouseover="document.getElementById('hey').style.fontFamily='courier'"> Make me COURIER!</a> ----
<a onMouseover="document.getElementById('hey').style.fontFamily='verdana'"> Make me VERDANA!!!</a>
</div>
</body>
</html>
If you really want to use PHP and don't want the entire page to reload, you would need some form of AJAX implmentation.
However...your problem can be solved more easily with Javascript and I would recommend using that instead. The jQuery library allows you to change CSS styles with minimal code. There are a few code examples on changing style attributes on the jQuery website.
Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.
My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.
So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?
This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.
Yes, it's possible (in most browsers) via opacity. Here's a tutorial.
I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).
Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.
You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).
I'd rather avoid transparency tricks.
This worked for me (uses jQuery):
$("#upload-box").change(function(){
$("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
$("#upload-box").click();
});
And the HTML:
<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />
It creates a text input, and a hidden upload input, and patches (=routes) the click on the text input to the hidden file input.
When a file is selected, it will write back the name of the file in the text input, in line with what most users would expect from the interface.
Should work on FF, Chrome, IE9 and +. I didn't test it on IE8.
Here's a jsfiddle. Thank you for upvoting my answer if you like it.
You can do it without any security issues.
Just code that on onmouseenter will promote the zindex of the real upload button (you can use opacity on it or make it transparent) and then you will not need to trigger a click but just use the click from the user.