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

Question

我有这些代码来显示从输入中选择的文件的名称，它会预览第一张图片：

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/

Answer 1

感谢您的挑战，这是我第一次接触 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/en/tutorials/file/dndfiles/

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload

Answer 2

上一张和下一张图片幻灯片的示例代码。

var numImages = 4;
var curImage = 1;

var imgArray =[
  "one.jpg",
  "two.jpg",
  "three.jpg",
  "four.jpg"
];

function imageShow( xflip ) {
 curImage = curImage + xflip;
 if (curImage > numImages)
  { curImage = 1 ; } 
 if (curImage == 0)
 { curImage = numImages ; } 
     document.images[2].src =  imgArray[curImage - 1];
}

HTML 按钮：

<input type="button" value="<< Prev" onclick="imageShow(-1)">
<input type="button" value="Next >>" onclick="imageShow(1)">