我一直在努力尝试，但没有成功。
我有一个按钮和一个 div。当用户单击该按钮时，文件浏览器将打开并允许用户选择图像。图像被添加到 div 中。这是正面图。
我已经得到了代码。但我也想复制控件，以便用户可以添加回图像。但这似乎不起作用。帮我修改代码
或
如果你们能提出一些更好的选择，那就太棒了。
这是 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;
}
最佳答案
两个输入具有相同的 ID file。您不能 1:1 复制代码，您需要更改 ID(例如，在第一个代码片段中将其设置为 file1，在第二个代码片段中将其设置为 file2)。与 div 相同。而且您必须稍微重写代码以使其适用于多个字段。
关于javascript - HTML/jQuery 帮助我处理这段代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24460831/