1

I wanted to make a js code that generate a list about the selected pictures, with the thumb, filename and filesize of the current picture. But something wrong, because I cannot reach the filename and filesize, because the eventListener doesnt see it. Any solution?

$('#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);
    }
});
4

2 回答 2

1

尝试在更改函数之外声明 var 文件

于 2013-06-18T21:43:54.860 回答
0

我认为这样的事情可能对你有用

var stuffIcannotSee;

var my_func=function(importStuff){
      return function(e){
          alert(importStuff + "This is now in the context of the function");
      };
}(stuffIcannotSee);

$('#media_uploader').change( my_func);
于 2013-06-18T21:55:05.647 回答