首页 文章

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

提问于
浏览 次
1

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

$(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();
});

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" class="uploadimg">Open uploader</button>
<input type="file">
<img id="ImgUpload" alt="Your Image"/>
<br>
<br>
</div>
<button type="button">Duplicate button</button>
javascript jquery html css

3 回答

  • 1

    你可以附加元素而不是复制它 . 您可以使用变量更改类和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/

    回复于
  • 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>
    回复于
  • 0

    我在这个文件预览中看到的一个常见问题是，他们中的大多数都无法正确呈现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/*" 以仅过滤掉图像

    回复于

相关问题