Question

我一直在努力尝试，但没有赢。

我有一个按钮和一个div。当用户单击该按钮时，文件浏览器打开并允许用户选择图像。图像被添加到div中。这是前面的形象。

我已经获得了相应的代码。但我也想复制控件，以便用户可以添加图像。但这似乎不起作用。帮我修复代码

OR

如果你们可以提出一些更好的选择，那就太棒了。

这是jsbin演示：

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

Answer 1

两个输入都具有相同的ID file。您无法复制代码1：1，您需要更改ID（例如，将其在第一个代码snipet中设置为file1，在第二个代码中将其设置为file2）。与div相同。而且你必须稍微重写代码，以便它适用于多字段。

HTML / jQuery帮我这个代码？

1 个答案: