Question

我有一个上传和图像的功能，并为此图像添加预览，我有两个按钮，当我点击第一个点击输入类型文件并打开它，第二个重复div ，我怎么能复制这个div并改变它的id或者类？并且在复制之后如何使按钮适用于新的重复div而不仅仅是原始的div？这是我的代码：

＆＃13;

$(function() {
$("input:file").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});

function imageIsLoaded(e) {
	$('#ImgUpload').attr('src', e.target.result);
};

$('.uploadimg').click(function(){
    $('input:file').click();
});

＆＃13;

input{
display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uploader">
<button type="button" class="uploadimg">Open uploader</button>
<input type="file">
<img id="ImgUpload" alt="Your Image"/>
<br>
<br>
</div>
<button type="button">Duplicate button</button>

＆＃13;

Answer 1

将元素和脚本复制在一起会很有帮助检查一下，我按照你想要的那样工作（给我带来了好时光）

var i = 0;
$('#inputfile' + i).change(function() {
  console.log(i);
  if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = imageIsLoaded;
    reader.readAsDataURL(this.files[0]);
  }
});


function imageIsLoaded(e) {

  console.log(i);
  $('#ImgUpload' + i).attr('src', e.target.result);
};

function upload(id) {
  $('#' + id).click();
};

$('#duplicate').click(function() {
  i++;
  var newelement =

    '<br><div class="uploader">' +
    '<button type="button" class="uploadimg" onclick="upload(\'inputfile' + i + '\')">Open uploader</button>' +
    '<input type="file" id="inputfile' + i + '" >' +
    '<img id="ImgUpload' + i + '" alt="Your Image" />' +
    '<br><br>' +
    '<script>$(\'#inputfile' + i + '\').change(function() { ' +
    'console.log(i);' +
    'if (this.files && this.files[0]) {' +
    'var reader = new FileReader();' +
    'reader.onload = imageIsLoaded;' +
    'reader.readAsDataURL(this.files[0]);' +
    '}' +
    '});</sc'+'ript></div>';
  $(newelement).insertBefore("#duplicate");

});

input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uploader">
  <button type="button" onclick="upload('inputfile0')">Open uploader</button>
  <input type="file" id="inputfile0">
  <img id="ImgUpload0" alt="Your Image" />
  <br>
  <br>
</div>
<button type="button" id="duplicate">Duplicate button</button>

Answer 2

我在此文件预览中看到的一个常见问题是，大多数问题无法正确呈现jpg's rotated with exif orientation

第二件事是使用URL.createObjectURL而不是使用base64 dataURL更好。这也引发了另一个问题，即大多数开发人员忘记了revoked objectURL的

这就是为什么我创建Screw-FileReader所以你可以轻松调用blob.image()并使用自动撤销的对象网址获取图像，并且还使用画布内置了exif自动旋转。

var $file = $('#filepicker').on('change', preview);

$('.uploader button').click(function() {
  $file.click()
})

function preview(evt) {
  var preview = document.querySelector('.preview')
  
  Array.from(this.files).forEach(function(file) {
    file.image().then(function(img) {
      preview.appendChild(img)
    }, function() {
      // err not an image...
    })
  })
}

input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script>

<div class="uploader">
  <button type="button">Open uploader</button>
  <input id="filepicker" type="file" multiple accept="image/*">
  <div class="preview"></div>
</div>

第二件事我对Soltani Neji的回答是，当你在第一个上传按钮之前点击dublicate按钮时，它会产生意想不到的事情。它没有很好地跟踪指数。

现在提出我的建议：使用multiple属性，只需一个按钮即可使其更简单。它还有助于添加accept="image/*"以仅滤出图像

Answer 3

您可以附加元素而不是复制它。您可以使用变量更改类和ID。

$('.duplicate').click(function() {
  var newClass="new-class";
  var toAppendElement = '<div class="uploader">' +
    '<button type="button" class="uploadimg '+newClass+'">Open uploader</button>' +
    '<input type="file">' +
    '<img id="ImgUpload" alt="Your Image" />' +
    '<br><br></div>';
  $(".cloned").append(toAppendElement);
})

http://jsfiddle.net/8h3gcyhz/

将为重复的div打开图像预览

3 个答案: