问题描述
从现在开始，无论何时单击浏览和上传，我如何才能显示多张图像，它总是将图片显示在同一位置。 我想知道是否有可能使我单击的每个“浏览”都显示在“浏览按钮”旁边。 还有可能实现一个添加按钮，以便在单击“添加按钮”时，另一个“浏览文件”将出现在其下方。 如果可能的话，我可以对可以添加的“浏览文件”数量进行计数。 因为我要实现的是我只希望“浏览文件”的总数为15，并且一旦点击15，“添加按钮”将被禁用。 因此，在这种情况下，我有3个部分，我希望所有部分中的“浏览按钮”总数仅15个。我只允许使用HTML，CSS和Javascript
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#target') .attr('src', e.target.result) .width(150) .height(200); }; reader.readAsDataURL(input.files[0]); } }
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <fieldset> <legend>Section1</legend> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <br> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <br> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <button>Add</button> </fieldset> <fieldset> <legend>Section2</legend> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <br> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <br> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <button>Add</button> </fieldset> <fieldset> <legend>Section3</legend> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <br> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <br> <input type='file' onchange="readURL(this);" /> <img id="target" src="#" alt="your image" /> <button>Add</button> </fieldset>
1楼
问题是因为您在所有表单元素上都有重复的id属性。
在document的上下文中，所有元素的id属性必须唯一。
您可以通过使用类代替，并使用DOM遍历来查找与更改的input相关的img来解决此问题。
还值得注意的是，您应该使用JS连接事件，而不要使用过时的onX事件属性。
尝试这个。
$('fieldset input').change(function() { if (this.files && this.files[0]) { var $target = $(this).next('.target'); var reader = new FileReader(); reader.onload = function(e) { $target.attr('src', e.target.result).width(150).height(200); }; reader.readAsDataURL(this.files[0]); } });
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <fieldset> <legend>Section1</legend> <input type="file" /> <img class="target" src="#" alt="your image" /> <br> <input type="file" /> <img class="target" src="#" alt="your image" /> <br> <input type="file" /> <img class="target" src="#" alt="your image" /> <button>Add</button> </fieldset> <fieldset> <legend>Section2</legend> <input type="file" /> <img class="target" src="#" alt="your image" /> <br> <input type="file" /> <img class="target" src="#" alt="your image" /> <br> <input type="file" /> <img class="target" src="#" alt="your image" /> <button>Add</button> </fieldset> <fieldset> <legend>Section3</legend> <input type="file" /> <img class="target" src="#" alt="your image" /> <br> <input type="file" /> <img class="target" src="#" alt="your image" /> <br> <input type="file" /> <img class="target" src="#" alt="your image" /> <button>Add</button> </fieldset>