Question

大家好我有多个上传图片的代码，但我想每次上传只有一张图片。所以每次点击带有动态ID 的上传按钮时，我都会创建输入文件。但是我在检查用户是选择要上传的文件还是按下取消按钮时遇到问题。因为如果用户按下取消按钮我想删除我创建的输入文件。对于完整的sourcenya如下：

＆＃13;
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="result"></div> <button id="btnimg">upload image</button> <div id="previewimage"> </div> </body>
＆＃13;
advertiser/edit/1
＆＃13;
＆＃13;
＆＃13;

提前谢谢你，

Answer 1

您可以查看.length元素<input type="file">属性的.files以确定用户是否选择了文件

Answer 2

这对我来说听起来像xy-problem。

我还没有（还）收到你关于为什么你想做的回复，所以我会根据两种可能的情况做出回答：

如果您想跟踪所选文件，以便以后能够对它们进行任何操作（例如通过AJAX发送），那么使用单个<input> 。
在每次更改事件中，您都会将新文件存储在一个数组中，以后您也可以在其中执行某些操作：

(function() {
  // this Array will hold our files, should be accessible to the final function 'doSomething'
  var savedFiles = [];
  var counter = 0;
  var upload = $('#upload');
  upload.on('change', onuploadchange);

  $("#btnimg").click(function routeClick() {
    upload.trigger('click');
  });

  $('#endbtn').click(function doSomething() {
    console.log(savedFiles);
  });

  function onuploadchange() {
    var inputFiles = this.files;
    var inputFile = inputFiles[0];   
    if (!inputFile) { return; } // no File ? return
    savedFiles.push(inputFile); // save this File
    // don't use a FileReader here, useless and counter-productive
    var url = URL.createObjectURL(inputFile);
    var imghtml = "<img id='img_upload_" + counter + "' src='" + url + "' width='50px;' height='50px;'/>";
    $('#previewimage').append(imghtml);
    $('#endbtn').removeAttr('disabled');
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
  <!-- A single input to save them all-->
  <input type='file' id='upload' style='display:none;' />
</div>
<button id="btnimg">upload image</button>
<div id="previewimage">
</div>
<button id="endbtn" disabled>do something with saved files</button>

如果出于不明原因，绝对需要保留文档中所有已填充的<input>元素，只有在最后一个元素本身已填充时才创建新元素。< / p>

$(document).ready(function() {
  $("#btnimg").click(function() {
    // grab previous ones
    var inputs = $("input[id^='upload']");
    // get the last one we created
    var last = inputs.last();
    var counter = inputs.length;
    console.log(counter);
    var upload;
    // if there is no input at all, or if the last one is already filled with a File
    if (!last.length || last[0].files.length) {
      console.log('create new input');
      upload = makeNewInput();
    } else {
      // use the last one
      upload = last;
    }
    //trigger to dialog open file
    upload.trigger('click');

    function makeNewInput(counter)  {
      var html = "<input type='file' id='upload_" + counter + "' style='display:none;'/>";
      var el = $(html);
      el.on('change', onuploadchange);
      $('#result').append(el);
      return el;
    }

    function onuploadchange() {
      var inputFiles = this.files;
      var inputFile = inputFiles[0];
      var url = URL.createObjectURL(inputFile);
      var imghtml = "<img id='img_upload_" + counter + "' src='" + url + "' width='50px;' height='50px;'/>";
      $('#previewimage').append(imghtml);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="result"></div>
<button id="btnimg">upload image</button>
<div id="previewimage">
</div>

如何在jquery上打开对话框文件输入时取消取消

2 个答案: