HTML/jQuery Help me with this code?

Question

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;
 }

please narrow your issues down to specific areas of your code and provide that code in your question — charlietfl
– charlietfl, Commented Jun 27, 2014 at 21:17
"Help me fix the code" No. At least not until you've shown a conscious attempt to fix it yourself, included relevant code in your question, and added far far more detail as to what the code should be doing — Bojangles
– Bojangles, Commented Jun 27, 2014 at 21:17
I've provided the jsbin demo but anyways i'm giving the code. — ItisShikhar
– ItisShikhar, Commented Jun 27, 2014 at 21:18
I tried to replicate by changing IDs and altering the code but in vain. — ItisShikhar
– ItisShikhar, Commented Jun 27, 2014 at 21:25
As others have mentioned, it would be helpful to see what you tried and what went wrong. — showdev
– showdev, Commented Jun 27, 2014 at 21:27

nbar · Accepted Answer · 2014-06-27 21:21:08Z

2

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.

answered Jun 27, 2014 at 21:21

nbar

6,1482 gold badges31 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nbar Over a year ago

@user3716080 You don't understand the JS-code you have there, do you? Don't understand me wrong, but as I said, you cant just copy past the HTML, and change the IDs, you also need some work on the JS-code.

Collectives™ on Stack Overflow

HTML/jQuery Help me with this code?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related