http://jsfiddle.net/ZhmUw/

I tried to do it through position: absolute, so that when I clicked on the link, I clicked on type = "file", but nothing happened. If you do this on js:

document.getElementById('file').click;

it does not work in some browsers, so this option does not roll.

    4 answers 4

    I do this (or button )

     .upload-link { color: #36c; display: inline-block; *zoom: 1; *display: inline; overflow: hidden; position: relative; padding-bottom: 2px; text-decoration: none; } .upload-link__txt { z-index: 1; position: relative; border-bottom: 1px dotted #36c; } .upload-link:hover .upload-link__txt { color: #f00; border-bottom-color: #f00; } .upload-link__inp { top: -10px; right: -40px; z-index: 2; position: absolute; cursor: pointer; opacity: 0; filter: alpha(opacity=0); font-size: 50px; } 
     <a class="upload-link js-fileapi-wrapper"> <span class="upload-link__txt">Upload photo</span> <input class="upload-link__inp" name="photo" type="file" accept=".jpg,.jpeg,.gif" /> </a>

      The standard way is to decide via label

       label.uploadbutton input { display: none; } label.uploadbutton .button { width: 100px; height: 20px; background: yellow; border: 1px solid black; cursor: pointer; } label.uploadbutton .button:active { background: green; } 
       <label class="uploadbutton"> <div class="button">Upload</div> <input type="file"/> </label>

      • This is not cross-browser, for example Opera 12.15 does not understand this. PS Although, through the opacity is already starting to work. - RubaXa
      • in theory, it should always work with the click trigger, but it should be done in the same thread (or whatever) as the click handler, the last time it worked for me from IE6. - zb '
      • one
        Here for the opera, jsfiddle.net/oceog/tP8d9/4 - zb '
      • In general, the way cool and for some reason I meet him for the first time, thank you. - RubaXa
      • @RubaXa is strange by the way, the label is the one that was invented ... - zb '

      I tried to do it through position: absolute, so that when I clicked on the link, I clicked on type = "file", but nothing happened. If you do this on js:

      document.getElementById ('file'). click;

      it does not work in some browsers, so this option does not roll.

      Well, of course this method will not work. This code returns a function, but does not call. And to call:

       document.getElementById('file').click(); 

         <label for="upload_img">Upload</label> <form style="display:none;" enctype="multipart/form-data"> <input type="file" id="upload_img" name="photo"> </form>