CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ItisShikhar
ItisShikhar

Reputation: 192

HTML/jQuery Help me with this code?

I've been trying really hard on this but to no win.

I have a button and a div. When user clicks that button the file browser opens up and allows user to choose image. The image gets added to the div. That's the front image.

I've got the code for that. But I also wanted to duplicate the controls so that the user can add back image. But that doesn't seem to work. Help me fix the code

OR

If you guys can suggest some better alternative then it would be amazing.

Here's the jsbin demo:

http://jsbin.com/pulug/1/

HTML:::

    <html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <fieldset>
            <legend>Choose Front Image</legend>
            <input type=file id='file' class="button" onchange="startRead()"/>
            <div id="dragherefront" >Drop files here</div>  
            <div id="manualfront"></div>
        </fieldset>
        <fieldset>
            <legend>Choose Back Image</legend>
            <input type=file id='file' class="button" onchange="startRead()"/>
            <div id="draghereback" >Drop files here</div>  
            <div id="manualback"></div>
        </fieldset>
    </body>
    </html>

CSS::

 #dragherefront{
     width: 128px;
     height: 128px;
     background-color: rgba(221,214,155,0.4);
     border: 1px dashed black;
     text-align: center;
     position: absolute;
     opacity: 0;
     overflow: hidden;
 }

 #draghereback{
     width: 28px;
     height: 128px;
     background-color: rgba(221,214,155,0.4);
     border: 1px dashed black;
     text-align: center;
     position: absolute;
     opacity: 0;
     overflow: hidden;
 }

 #manualfront{
     width: 128px;
     height: 128px;
     overflow: hidden
     background-color: rgba(221,214,221,0.3);
     border: 1px dashed black;
     overflow: hidden;
     z-index: 0;
 }

 #manualback{
     width: 128px;
     height: 128px;
     overflow: hidden
     background-color: rgba(221,214,221,0.3);
     border: 1px dashed black;
     overflow: hidden;
     z-index: 0;
 }

Upvotes: 0

Views: 71

Answers (1)

nbar
nbar

Reputation: 6158

Both inputs have the same ID file. You cant copy the code 1:1, you need to change the IDs (for example set it in the first code snipet to file1 and in the second to file2). The same with the divs. And you have to rewrite the code a bit so that it works with multible fields.

Upvotes: 2

Related Questions