How to make javascript custom upload file?

Question

I have been working to create a totaly new upload control with custom UI. I have done the UI part but I cannot get the background job which is getting the full pathname of file to upload. Please help me do the real uploading part.

** TO BE HONEST, I FOUND THIS CODE ONLINE **

here is the link - http://jsfiddle.net/c3kyX/

and here is the code below

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #container {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid red;
        overflow: hidden;
    }
    #doit, #hid {
        position: absolute;
        cursor: default;
    }
    #doit {
        top: 0;
        left: 0;
        border: 1px solid #000;
    }
    #hid {
        opacity: 0.001;
        font-size: 300%;
        top: -5px;
        right: -5px;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    #hid {
    display: none;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="container" title="Choose File">
    <div id="doit">
    <img src="upload.png" width="100" width="100" />
    </div>
    <input id="hid" type="file" size=1>
    </div>
    <script type="text/javascript">
    doit.onclick = function(){hid.click();};
    </script>
    </body>
    </html>

score 0 · Accepted Answer · answered Feb 21 '13 at 19:38

0

The problem is that you are not doing anything with the file. You need to post it somewhere to process it and the form needs to have the proper enctype. For example:

 <form action="upload.php" ENCTYPE="multipart/form-data" method="post">

Obviously, you'll need to write the script that handles the actual file processing (and of course it needn't be a php file).

answered Feb 21 '13 at 19:38

TddOrBust

450
2
9

I am going to embed this code to an asp.net file. So I will do the uploading in asp.net, but somehow I need to pass that selected file's path to code behind of asp.net – Arif YILMAZ Feb 21 '13 at 19:40
You still need to do upload the actual file from the user's system to your server. That is what the form element is for. You will then have a server side script (or other processor) that grabs the file and copies it to the right location for processing. For example, in PHP, you do that by accessing the file in the $_FILES super global variable. So my point is that getting the file is more involved. – TddOrBust Feb 21 '13 at 19:50
This may help you out: http://stackoverflow.com/questions/3375644/equivalent-of-files-in-c-sharp – TddOrBust Feb 21 '13 at 19:58

How to make javascript custom upload file?

1 Answers1