我想制作一个js代码,生成有关所选图片的列表,并带有当前图片的缩略图,文件名和文件大小。但是出了点问题,因为我无法到达文件名和文件大小,因为eventListener看不到它。有什么办法吗?

$('#media_uploader').change( function() {
    var files = document.getElementById("media_uploader").files;
    var output = document.getElementById("info");
    output.innerHTML = '';
    for(var i = 0; i< files.length; i++)
    {
        var file = files[i];
        if( !file.type.match('image') )
          continue;

        var picReader = new FileReader();
        picReader.addEventListener("load",function(event){
            var picFile = event.target;
            var div = document.createElement("div");
            div.innerHTML = '<img src="' + picFile.result + '" />';

            var lineNode = document.createElement('div');
                lineNode.setAttribute('class','uploaded_file_line');

            var fileThbDivNode = document.createElement('div');
                fileThbDivNode.setAttribute('class','uploaded_file_thb');
            fileThbDivNode.appendChild(div);
            lineNode.appendChild( fileThbDivNode );

            var fileNameDivNode = document.createElement('div');
                fileNameDivNode.setAttribute('class','uploaded_file_name');
            var fileNameNode = document.createElement('input');
                fileNameNode.setAttribute('value',picFile.name);
            fileNameDivNode.appendChild( fileNameNode );
            lineNode.appendChild( fileNameDivNode );

            var fileExtensionDivNode = document.createElement('div');
                fileExtensionDivNode.setAttribute('class','uploaded_file_extension');
            var fileExtensionNode = document.createElement('span');
                fileExtensionNode.innerHTML = "JPG";
            fileExtensionDivNode.appendChild( fileExtensionNode );
            lineNode.appendChild( fileExtensionDivNode );

            var fileSizeDivNode = document.createElement('div');
                fileSizeDivNode.setAttribute('class','uploaded_file_size');
            var fileSizeNode = document.createElement('span');
                fileSizeNode.innerHTML = Number((((picFile.size)/1024)/1024).toFixed(3)) + " Mbytes";
            fileSizeDivNode.appendChild( fileSizeNode );
            lineNode.appendChild( fileSizeDivNode );

            var clearDivNode = document.createElement('div');
                clearDivNode.setAttribute('class','clear');
            lineNode.appendChild( clearDivNode );

            output.appendChild( lineNode );
        });
        picReader.readAsDataURL(file);
    }
});

最佳答案

尝试在更改功能之外声明var文件

关于javascript - 如何在事件监听器之外获取变量?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17179267/

10-11 13:01