如何在单击按钮时更改图像预览

熊猫B3ar

我有以下代码来显示从输入中选择的文件的名称，它将预览第一张图像：

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



    reader.onload = function (e) {

        var filename = input.value;
        var lastIndex = filename.lastIndexOf("\\");
        if (lastIndex >= 0) {
            filename = filename.substring(lastIndex + 1);
        }
        var files = $('#my_file')[0].files;
        for (var i = 0; i < files.length; i++) {
         $("#files").append('<div class="filename"><span name="fileNameList">'+files[i].name+'</span></div>');

        }

        $("#nextBtn").on("click",function(){

        })
        $('#myImg').attr('src', e.target.result);
    }

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

   }
}

我想要做的是，当我单击“下一个”按钮时，它将转到选择的下一个图像；或者，如果我单击“上一个”按钮，它将转到上一个图像（如果显示的是最后一个图像）第一个）。我该怎么做呢？谢谢。

更新：

var fileInput = document.getElementById("my_file");
$(fileInput).on("change",function(event){
var next = document.getElementById("nextBtn");
next.onclick = function(xFlip){
    curImage = curImage+xFlip;
    var files = event.target.files;
    if(curImage > files.length){
        curImage = 1;
    }
    if(curImage == 0){
        curImage = files.length;
    }
    $("#myImg").attr('src',files[curImage-1]);

};
console.log(document.getElementById("myImg").getAttribute("src"));
});

我这样做是因为从多个输入类型文件中检索了图像。https://jsfiddle.net/bfr6wp7e/2/

用户名

感谢您的挑战，这是我第一次使用File API :)

这是jsFiddle，我认为这是对您问题的正确答案：

https://jsfiddle.net/mkbctrll/aq9Laaew/300936/

JS部分

const fileInupt = document.getElementById('fileInput')
const fileList = document.getElementById('fileList')

const slickSettings = {
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true
}
const initSlickCarousel = (target, settings) => {
  $(target).slick(settings);
} 

const handleInputChange = (event) => {
  console.log('We are handling it sir!')
  const filesArray = Array.from(event.target.files)


  filesArray.map((singleFile) => {
    const outputImg = document.createElement('img')
    const fileReader = new FileReader()

    outputImg.className = 'img-thumbnail'

    // Let's read it as data url - onload won't return a thing without it
    fileReader.readAsDataURL(singleFile)

    fileReader.onload = (event) => { outputImg.src = event.target.result }

    console.log(outputImg)

    fileList.appendChild(outputImg)
  })

 initSlickCarousel(fileList, slickSettings)
}

if(window.File && window.FileReader && window.FileList) { // check if browser can handle this

  console.log('We are good to go sir!')
  fileInput.addEventListener('change', handleInputChange, false)

} else {

  alert('File features are not fully supported. Please consider changing the browser (newest Chrome or Mozilla).')
}

如果没有以下来源，我将无法掌握该技术：

https://www.html5rocks.com/zh-CN/tutorials/file/dndfiles/

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。