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)">

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

2 个答案: