Replacing Normal File Upload Input with an Image

Replacing normal file upload input with an image

Because of the heap of security issues around how file inputs work, they're pretty hard to fix. What does work, however, is a scheme like this:

Design your own look for a file input that's fairly close to the default one in size and shape
Position your file input and a real file input at the same place in your form, with the real one on top of yours
Make the real input be transparent (that is, set the opacity to zero)

Now clicks on your elements styled the way you want them to look will actually be interpreted by the browser as clicks on the file input. You have to tweak things somewhat for IE, because IE7 allows the user to type directly into the input while other browsers all immediately launch the file chooser when the element is clicked anywhere.

edit — here is a jsfiddle that works in Chrome at least. The HTML:

<div class='fancy-file'>
    <div class='fancy-file-name'> </div>
    <button class='fancy-file-button'>Browse...</button>
    <div class='input-container'>
        <input type='file'>
    </div>
</div>

That wraps the "fake" file input that I'll style with my own CSS, as well as the real <input> element. Here's the CSS:

div.fancy-file {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

div.fancy-file-name {
    float: left;
    border-radius: 3px;
    background-color: #aaa;
    box-shadow:
        inset 1px 1px 3px #eee,
        inset -1px -1px 3px #888,
        1px 1px 3px #222;
    font-weight: bold;
    font-family: Courier New, fixed;
    width: 155px;
    font-size: 12px;
    padding: 1px 4px;
}

button.fancy-file-button {
    float: left;
    border-radius: 3px;
    border: 1px solid red;
    background-color: #F5BD07;
    font-weight: bold;
    vertical-align: top;
    margin: 0 0 0 3px;
}

div.input-container {
    position: absolute;
    top: 0; left: 0;
}

div.input-container input {
    opacity: 0;
}

The outer container is made "position: relative" to make it easy to position the real <input> over the fake stuff. The fake stuff has my made-up fancy styles, and it's sized so that it's just about the same as the overall size of a real file input. The real one is absolutely positioned and transparent.

Here's some jQuery to drive it:

$('div.fancy-file input:file').bind('change blur', function() {
    var $inp = $(this), fn;

    fn = $inp.val();
    if (/fakepath/.test(fn))
        fn = fn.replace(/^.*\\/, '');

    $inp.closest('.fancy-file').find('.fancy-file-name').text(fn);
});

Browsers won't give you the complete pathname, but they'll give you a part of it. Some browsers (Chrome and IE) give you an obviously-fake path prefix, so the code strips that out (because it's useless).

How to replace a file input's content by the result of canvas.toDataURL?

It seems we cannot modify the <input type="file">, but we can add the data to another text field (as advised by @PatrickEvans) or an <input type="hidden">:

function doit() {    var file = document.getElementById('file').files[0],        canvas = document.getElementById('canvas'),        hidden = document.getElementById('hidden'),        ctx = canvas.getContext("2d"),        img = document.createElement("img"),        reader = new FileReader();          reader.onload = function(e) {         img.src = e.target.result;    }        img.onload = function () {         ctx.drawImage(img, 0, 0);        hidden.value = canvas.toDataURL("image/jpeg", 0.5);    }    reader.readAsDataURL(file);}

<input type="file" onchange="doit();" id="file" />
<form action="/upload" method="post"><input type="hidden" id="hidden" /><input type="submit" /></form>
<canvas id="canvas" style="display: none" />

How to make image to behave like file input?

To make the image behave like an input file element, you can just call the input file .click() method when you click on the img.

This is how should be your code:

function pro1(){
   document.getElementById("file").click();
}

Demo:

<html lang = "en">    <head>        <title>            Profile Click        </title>        <style>            #file{                display: none;            }        </style>    </head>    <body>        <script>            function pro1(){                document.getElementById("file").click();            }        </script>        <form name = "prolis">        <img src = "index.jpg" id = "image" onclick = "pro1()";>        <input type = "file" id = "file">    </body></html>

Replace an image with an uploaded image (Bootstrap, JQuery)

DEMO HERE

EDIT: I added a button remove uploaded file as you want,if you don't like show/hide effect just delete slow , Image is shown only on upload:

$('#blah').hide();
$('#remove').hide();  
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        if( $('#imgInp').val()!=""){

            $('#remove').show();
            $('#blah').show('slow');
      }
        else{ $('#remove').hide();$('#blah').hide('slow');}
        readURL(this);
    });

    $('#remove').click(function(){
          $('#imgInp').val('');
          $(this).hide();
          $('#blah').hide('slow');
 $('#blah').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png');
});

This s an example made by someone( Not me :) will help you i suppose , see the code below:

function readPath(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readPath(this);
});

HTML Code:

<form id="form1">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

How to make an image upload input to submit form when file is chosen?

This will work you need to use pure Javascript method

document.getElementById("uploadform").submit();

function yourFunction(){  document.getElementById("uploadform").submit();// Form submission}

<form id="uploadform" target="upiframe" action="upload.php" method="post" enctype="multipart/form-data">  <input type="file" name="fileToUpload" class="test" onchange="yourFunction()"></form>
<iframe id="upiframe" name="upiframe" witdh="0px" height="0px" border="0" style="width:0; height:0; border:none;"></iframe>

Change default text in input type=file?

Each browser has it's own rendition of the control and as such you can't change either the text or the orientation of the control.

There are some "kind of" hacks you may want to try if you want an html/css solution rather than a Flash or silverlightsolution.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Personally, because most users stick to their browser of choice, and therefore are probably used to seeing the control in the default rendition, they'd probably get confused if they saw something different (depending on the types of users you're dealing with).

Replacing Normal File Upload Input with an Image