In JavaScript can I make a “click” event fire programmatically for a file input element?

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0);  position: relative; top: -40px;; left: -20px" />
</div>

asp:FileUpload control styling Using css

HTML
--------------------------------------------------

<label class="file-upload">Browse
<asp:FileUpload   ID="fuProfilePic" onchange="ShowImagePreview(this);" runat="server" placeholder="Current Work, Title" CssClass="fileupload p0" />
</label>



CSS
---------------------------------------------------

<style>

  .file-upload
  {
     display : inline-block;
  overflowhidden;  
  positionrelative;  
  text-align:center !important;
  vertical-alignmiddle;
/* Cosmetics */
  border1px solid #fff;
  background:#D5D5D5;
  color#000; 
  padding:4px;
 
/* browser can do it */
  /*border-radius: 6px;
 -moz-border-radius: 6px;
  text-shadow: #000 1px 1px 2px;
 -webkit-border-radius: 6px;*/
   } 
  
   /* The button size */ 
 .file-upload { height1.3em; }
 .file-upload,.file-upload span { width3.5em; } 
  
 .file-upload input
  {
 positionabsolute;
 top0;
 left0;
 margin0;
 font-size11px;
/* Loses tab index in webkit if width is set to 0 */
 opacity0;
 filteralpha(opacity=0);
 }
 
 .file-upload strong { fontnormal 16px Tahoma,sans-serif;text-align:center;vertical-align:middlemargin-left:28px; } 
 
 .file-upload span
  {
 positionabsolute;
 top0left0;
 displayinline-block;
/* Adjust button text vertical alignment */
 padding-top.15em;
  } 

</style>





Search This Blog

Arsip Blog

Powered by Blogger.

Recent

Comment

Author Info

Like This Theme

Popular Posts

Video Of Day

Sponsor

Most Popular