How can I have a form with an upload option that doesn't display the file path?

I have a form which allows the users to upload an image. it uses

<input name="imageupload" id="imageupload" type="file" /> 

But I would like the user to only see the browse button and not the file path开发者_开发问答. I also do not want to use SWFupload plugin

You will need to use some Javascript for this.

For security reasons, you cannot modify the path of a file input (we can't have malicious coders uploading any file they want).

But what you could do, is create a new text input with the value you want to show, and position it on top if the file input. Then, in your form's onsubmit handler, you could disable the text-input (so its value is not submitted), submit the form, then re-enable the text-input.

The only down-side to this is that if the user clicks inside the text-input, the 'choose file' dialog will not appear. However, you can get around this by binding to the onfocus event of the text-input, and using it to set focus to the file-input element.

Here we go!

<script type="text/javascript">
    $(function () {
        $('#btn-upload').click(function (e) {
            e.preventDefault();
            $('#file').click();
        });
    });
</script>

<style type="text/css">
    #file { display:none; } 
</style>

<div>
    <input type="file" id="file" name="file" />
    <button type="button" id="btn-upload">Image</button>
</div>