Irresistable Posted January 6, 2010 Share Posted January 6, 2010 <input type="file"> How do I customize this so I can have it to look the way I want. EG: With the submit button underneath, or whatever. I know this will end up seperate, and may need javascript, but can someone tell me how to do it? Link to comment https://forums.phpfreaks.com/topic/187343-customizing-file-upload-input/ Share on other sites More sharing options...
haku Posted January 6, 2010 Share Posted January 6, 2010 I believe you cannot do this, as it is entirely browser based, and the browsers do not let you customize the file upload form. The only possible thing I can think that you could *maybe* do, is to hide the file input altogether, create a dummy file input, then use javascript to take whatever data the user enters and put it in the file upload input using javascript. But I suspect this will not work, as file upload inputs are resistant to javascript for security reasons. Link to comment https://forums.phpfreaks.com/topic/187343-customizing-file-upload-input/#findComment-989297 Share on other sites More sharing options...
Irresistable Posted January 6, 2010 Author Share Posted January 6, 2010 I've seen file uploads that look different to that one. Would that be manually done? or what. I'm looking for a similar kind of attachment form like what hotmail uses. I can't find anything. Link to comment https://forums.phpfreaks.com/topic/187343-customizing-file-upload-input/#findComment-989301 Share on other sites More sharing options...
haku Posted January 6, 2010 Share Posted January 6, 2010 Why not pull apart the hotmail page and see how they have done it then? Link to comment https://forums.phpfreaks.com/topic/187343-customizing-file-upload-input/#findComment-989309 Share on other sites More sharing options...
Irresistable Posted January 6, 2010 Author Share Posted January 6, 2010 It's all javascript, it doesn't make much sense to me. However, I had a go at creating something similar. http://developers-community.com/test.php <-- Thats what I've got so far. Click on "Attach" brings up a input, browse a file. Then the input disappears and a div gets displayed. Click on "Attach" and a blank new one gets displayed. The next thing I need to do is make it so that when onchange, it passes the file name. eg: filename.jpg over to the div in a seperate div, and they go underneath each other. Any ideas? Here is my code so far. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> var upload_number = 5; function deleteFileInput() { var att = document.getElementById("attach"); att.removeChild(att.childNodes[0]); } function addFileInput() { var d = document.createElement("div"); var file = document.createElement("input"); file.setAttribute("type", "file"); file.setAttribute("name", "attachment"+upload_number); file.setAttribute("id", "attachment"); file.setAttribute("onchange", "document.getElementById('attachments').style.display = ''; deleteFileInput();"); d.appendChild(file); document.getElementById("attach").appendChild(d); upload_number++; } </script> </head> <body> <a href="javascript:addFileInput();">Attach</a> <div id="attachments" style="width:150px; height:180px; border:1px solid #000; display:none;"> </div> <div id="attach"></div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/187343-customizing-file-upload-input/#findComment-989319 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.