如何在javascript打印中添加图像数量函数？

这是我想要实现的一个示例，用户首先选择图像，然后输入要在打印页面上显示的图像块数，我已经创建了添加图像和打印图像的功能，但这是我唯一想创建的一个，可以打印多个图像，这取决于用户输入的内容

这是我的代码：

var myApp = new function() {
this.geltint = function() {
var tab = document.getElementById('geltint');

var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";

var win = window.open('', '', 'height=700,width=700');
win.document.write(style); //  add the style.
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}
var myApp2 = new function() {
this.powdery = function() {
var tab = document.getElementById('powdery');

var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";

var win = window.open('', '', 'height=700,width=700');
win.document.write(style); //  add the style.
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}
var myApp3 = new function() {
this.powdery5ml = function() {
var tab = document.getElementById('powdery5ml');

var style = "<style>";
style = style + "table {width: 100%;font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px;text-align: center;}";
style = style + "</style>";

var win = window.open('', '', 'height=700,width=700');
win.document.write(style); //  add the style.
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
  $('#geltint')
    .attr('src', e.target.result)
    .width(244.8)
    .height(187.2);
};

reader.readAsDataURL(input.files[0]);
}
}

function readURL2(input) {
if (input.files && input.files[0]) {
var reader2 = new FileReader();

reader2.onload = function(e) {
  $('#powdery')
    .attr('src', e.target.result)
    .width(172.8)
    .height(230.4);
};

reader2.readAsDataURL(input.files[0]);
}
}

function readURL3(input) {
if (input.files && input.files[0]) {
var reader2 = new FileReader();

reader2.onload = function(e) {
  $('#powdery5ml')
    .attr('src', e.target.result)
    .width(244.8)
    .height(105.6);
};

reader2.readAsDataURL(input.files[0]);
}
}

var myApp=新函数（）{
this.geltint=函数（）{
var tab=document.getElementById（'geltint'）；
var style=“”；
style=style+“表格{宽度：100%；字体：17px Calibri；}”；
style=style+“表格，th，td{边框：实心1px#DDD；边框折叠：折叠；”；
style=style+“填充：2px 3px；文本对齐：居中；}”；
样式=样式+“”；
var win=window.open（''，''，高度=700，宽度=700'）；
win.document.write（样式）；//添加样式。
win.document.write（制表符outerHTML）；
win.document.close（）；
win.print（）；
}
}
var myApp2=新函数（）{
this.powdery=函数（）{
var tab=document.getElementById（'powdery'）；
var style=“”；
style=style+“表格{宽度：100%；字体：17px Calibri；}”；
style=style+“表格，th，td{边框：实心1px#DDD；边框折叠：折叠；”；
style=style+“填充：2px 3px；文本对齐：居中；}”；
样式=样式+“”；
var win=window.open（''，''，高度=700，宽度=700'）；
win.document.write（样式）；//添加样式。
win.document.write（制表符outerHTML）；
win.document.close（）；
win.print（）；
}
}
var myApp3=新函数（）{
this.powdery5ml=函数（）{
var tab=document.getElementById（'powdery5ml'）；
var style=“”；
style=style+“表格{宽度：100%；字体：17px Calibri；}”；
style=style+“表格，th，td{边框：实心1px#DDD；边框折叠：折叠；”；
style=style+“填充：2px 3px；文本对齐：居中；}”；
样式=样式+“”；
var win=window.open（''，''，高度=700，宽度=700'）；
win.document.write（样式）；//添加样式。
win.document.write（制表符outerHTML）；
win.document.close（）；
win.print（）；
}
}
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#geltint”）
.attr（'src'，e.target.result）
.宽度（244.8）
.身高（187.2）；
};
reader.readAsDataURL（input.files[0]）；
}
}
函数readURL2（输入）{
if（input.files&&input.files[0]）{
var reader2=新文件读取器（）；
reader2.onload=函数（e）{
$（“#粉状”）
.attr（'src'，e.target.result）
.宽度（172.8）
.高度（230.4）；
};
reader2.readAsDataURL（input.files[0]）；
}
}
函数readURL3（输入）{
if（input.files&&input.files[0]）{
var reader2=新文件读取器（）；
reader2.onload=函数（e）{
$（“#粉状5ml”）
.attr（'src'，e.target.result）
.宽度（244.8）
.身高（105.6）；
};
reader2.readAsDataURL（input.files[0]）；
}
}

这是我的HTML代码：

<HTML>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" 
rel="stylesheet" type="text/css" />
<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>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article,
aside,
figure,
footer,
header,
group,
menu,
nav,
section {
  display: block;
}
</style>
</head>

<body>
<div id="1stimage">
<input type='file' onchange="readURL(this);" />
<img id="geltint" src="#" alt="your image" />
<p>
  <input type="button" value="Print Table" onclick="myApp.geltint()" />
</p>
</div>

<div id="2ndimage">
<input type='file' onchange="readURL2(this);" />
<img id="powdery" src="#" alt="your image" />
<p>
  <input type="button" value="Print Table" onclick="myApp2.powdery()" />
</p>
</div>

<div id="3rdimage">
<input type='file' onchange="readURL3(this);" />
<img id="powdery5ml" src="#" alt="your image" />
<p>
  <input type="button" value="Print Table" onclick="myApp3.powdery5ml()" />
</p>
</div>
</body>

</html>

JS-Bin
文章
在一边
图形
页脚，
标题，
集团,，
菜单，
导航，
部分{
显示：块；
}

这就是我希望我的输出看起来简单明了的例子，你们可以和我分享任何建议或想法，伙计们，非常感谢

用户将选择一幅图像，然后输入他们想要的图像副本数量，然后按print，它将显示这样的打印预览，以及用户输入的图像总数

---

您可以使用

进行循环

并迭代直到

这一切都很好，我达到了我想要的输出你真的帮了我很多我欠你一个先生非常感谢你的教程纪念品一直以来，先生。谢谢。女士，请问我是否要在打印中的每个图像中添加空格，我应该在哪里添加代码？您可以更改
html+=“tab.outerHTML+”
在图像之间添加任何样式的空格。好的，我明白了，妈妈，最后一个问题，女士，按照你给出的方法，我是否可以打印所有三张图片，并在一次点击中添加我输入的数量？我的意思是，我会添加“全部打印”按钮，这样它将打印所有3张图像，总数量检查小提琴将为您工作。
<div id="1stimage">
  <input type='file' onchange="readURL(this);" />
  <!--added qty -->
  <input type="number" value="1" class="qty">
  <img id="geltint" src="#" alt="your image" />
  <p>
    <!--pass this as well-->
    <input type="button" value="Print Table" onclick="myApp.geltint(this)" />
  </p>
</div>
<!--do same for others ...->

var myApp = new function() {
  this.geltint = function(el) {
    var tab = document.getElementById('geltint');
    var qty = $(el).closest("div").find(".qty").val(); //get qty value
    console.log(qty)
    var style = "<style>";
    style = style + "table {width: 100%;font: 17px Calibri;}";
    style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
    style = style + "padding: 2px 3px;text-align: center;}";
    style = style + "</style>";
    var html = "";
    //loop
    for (var i = 1; i <= qty; i++) {
      html += tab.outerHTML //append
    }

    var win = window.open('', '', 'height=700,width=700');
    win.document.write(style); //  add the style.
    win.document.write(html); //pass same
    win.document.close();
    win.print();
  }
}