CSS styling and download button functionality

Question

CSS styling and download button functionality

Me and the guy from work are working on a web application so that our clients can log in and manage them. One of the sections asks the user to download the company logo, but, as we all know, the html browes button or tag, since it is also known, is a tough cookie style. this is how i want it to look: alt text

But the reality is that if I put a simple old file tag there, it will look soft, general and inappropriate, so I will go to Google for a solution, and after the hunt I came across this code, which gave the image below code (Which I also showing file loading without opacity equal to zero):

#divinputfile { height:85px; width:250px; margin:0px; background-image: url(images/upload_file.gif); background-repeat: no-repeat; background-position: right bottom; } #divinputfile #filepc { opacity: 0.0; -moz-opacity: 0.0; filter: alpha(opacity=00); font-size:16px; cursor: pointer; } #filepc { margin-top: 12px; } #fakeinputfile { margin-top:-28px; } #fakeinputfile #fakefilepc { width:250px; height:22px; font-size:18px; font-family:Arial; } <body> <br /> <div id="divinputfile"> <div id="fakeinputfile"> <br /> <input name="fakefilepc" type="text" id="fakefilepc" /> </div> <div align="right"> <input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/> </div> </div> </body>

alt text

This is a basic hack, and when I select the stylized button, I really select the invisible load button, then the load value is passed to the test field above to look like its really part of the load. Two problems with this method, and I hope you can help me here.

a) Only a button can be pressed to load. In most browsers (not including Chrome), you can click in the text box, as well as a button to download the image. Of course, using this method, the text of the file path is added to the text field, but any change to this field will not change the file, for example: if you chose file1.jpg to download, but you really wanted file2.jpg, changing the path to the file in the text the field will not change the thing in the ACTUAL load element

b) Some browsers, such as Chrome and Opera, add \ fakepath \ filepath to the text box, and this is just ugly, so any if statement that can remove this will also be extremely useful.

Hope you guys can help me with this if not using the code hints if anyone knows a good JavaScript plugin that saves the day.

thanks

+4

javascript html design css file-upload

Daniel James Clarke Dec 10 '10 at 0:58

source share

5 answers

Kissaki · Answer 1 · 2010-12-10T01:15:42+0000

You already have javascript for the text field to display the new file path value when changing. Thats where you have to also remove any / fakepath / parts, etc.

You can also add a click event to a text field that triggers a click event to view files.

I can tell you right away that this is pretty simple with jQuery, but I don’t know how to do it with simple JS.

/ e: Actually, it seems that file input actions cannot be triggered. See a related question. In JavaScript, can I make the "click" event programmatically for a file input element?

Hemlock · Answer 2 · 2010-12-22T03:31:58+0000

Question a: Do not fire the click event. Security and all that. You can add a second invisible download button in the same way as the first. If someone changes, delete another. And hacks accumulate ...

Question b: See Kissaki's answer. You will need JS to clear this second invisible field ...

Richard JP Le Guen · Answer 3 · 2010-12-22T04:51:54+0000

Here is the solution.

Question A is solved by creating <input type="file" /> full size of your widget and using sections to create areas without clicks.
Question B is solved with the trick I found here

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Style the File Upload Input - Example</title> <style type="text/css"> #file-upload { position:relative; top:0px; left:0px; width:250px; height:65px; overflow:hidden; padding-top:15px; background-image: url(images/upload_file.gif); background-repeat: no-repeat; background-position: right bottom; } #file-upload input[type='file'] { width:250px; height:65px; font-size:65px; opacity:0; filter:alpha(opacity=0); position:absolute; top:15px; left:0px; z-index:9; } #file-upload input { width:97%; } #file-upload #no-click { position:absolute; bottom:0px; left:0px; z-index:10; width:125px; height:40px; } </style> </head> <body> <div id="file-upload"> <input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" /> <div id="fake-file-upload"> <input name="fakefilepc" type="text" id="fakefilepc" /> <div id="no-click"></div> </div> </div> </body>

You might want to worry about elegant degradation ... the same thing here with HTML, CSS and JavaScript are more cleanly separated, which should get worse.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Style the File Upload Input - Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("body").addClass("js"); $("#file-upload").append("<div id=\"fake-file-upload\">" + "<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" + "<div id=\"no-click\"></div>" + "</div>"); $("#file-upload input[type='file']").change(function() { var clone = this.cloneNode(true); clone.type='text'; document.getElementById('fakefilepc').value = clone.value?clone.value:this.value; }); }); </script> <style type="text/css"> #file-upload { position:relative; top:0px; left:0px; width:250px; height:65px; } body.js #file-upload { overflow:hidden; padding-top:15px; background-image: url(images/upload_file.gif); background-repeat: no-repeat; background-position: right bottom; } body.js #file-upload input[type='file'] { width:250px; height:65px; font-size:65px; opacity:0; filter:alpha(opacity=0); position:absolute; top:15px; left:0px; z-index:9; } body.js #file-upload input { width:97%; } body.js #file-upload #no-click { position:absolute; bottom:0px; left:0px; z-index:10; width:125px; height:40px; } </style> </head> <body> <div id="file-upload"> <input size="0" name="filepc" type="file" id="filepc" /> </div> </body>

I used the following image as the image images/upload_file.gif (and its corresponding sizes for everything connected with it)

slacktracer · Answer 4 · 2010-12-25T00:58:23+0000

I believe the following link may help you: "Ajax download: download script file with progress indicator, drag and drop . " Not really ajax, just clever use of iframe. Hope it helps. The code is good!

Glenng · Answer 5 · 2010-12-25T20:29:35+0000

This is hard to do and even harder to cross-browser. Webkit (safari / chrome) has a completely different way of handling this than IE and Mozilla. As shown, you end up using a ton of hacks that you constantly need to check on each browser as they are released.

One way I found is to gradually expand the use of the plug-in. You only need to check for the presence of the flash, and flashblock does not block the item.

For example: http://www.uploadify.com/demos/ (although this does not seem to check for flashblock!)

CSS styling and download button functionality

More articles: