且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何为使用Jquery在fileuplaod中选择的多个图像提供预览?

更新时间:2023-01-28 18:40:56

好,这是真正的粗略实现

基本思想是,获取文件数组,循环遍历,使用File API添加图像,其中src值是js给您播放的那个blob,而不是用户计算机上的路径.>

The basic idea is, get the files array, loop through it, use the File API to add images where the src value is that blob which js gives you to play with, rather than the path on the users machine.

var inputLocalFont = document.getElementById("image-input");
inputLocalFont.addEventListener("change",previewImages,false); //bind the function to the input

function previewImages(){
    var fileList = this.files;

    var anyWindow = window.URL || window.webkitURL;

        for(var i = 0; i < fileList.length; i++){
          //get a blob to play with
          var objectUrl = anyWindow.createObjectURL(fileList[i]);
          // for the next line to work, you need something class="preview-area" in your html
          $('.preview-area').append('<img src="' + objectUrl + '" />');
          // get rid of the blob
          window.URL.revokeObjectURL(fileList[i]);
        }


}