如何获取图像的名称和大小? (Javascript)存储在数组中后使用FileReader对象? 在示例中所需的大小和图像文件的名称。 非常感谢你
$(document).ready(function() {
var storedFiles = [];
var srcc = "";
$('#file_input').on('change', function(e) {
storedFiles = [];
for (var i = 0; i < $(this).get(0).files.length; ++i) {
storedFiles.push($(this).get(0).files[i]);
}
});
function readFile(file, callback) {
var reader = new FileReader();
reader.onload = callback;
reader.readAsDataURL(file);
}
$(document).on('click', '#btn', function(e) {
$("#div_upload").empty();
var fLen = storedFiles.length;
$("#spaneaddfile").html(" count: " + storedFiles.length);
for (var i = 0; i < fLen; i++) {
var filnameonarry = storedFiles[i].name;
var filsizeonarry = Math.round((Math.abs(parseInt(storedFiles[i].size)) * 0.000000954) * 1000) / 1000;
filnameonarry = filnameonarry.toString().trim();
filnameonarry = filnameonarry.toLowerCase();
var chkename2 = parseInt(filnameonarry.length);
var chkename3 = parseInt(filnameonarry.length - 4);
var chkename4 = filnameonarry.substring(chkename3);
if (chkename4 == '.png' || chkename4 == '.gif' || chkename4 == '.jpg' || chkename4 == '.bmp' || chkename4 == 'jpeg') {
if (window.File && window.FileReader && window.FileList && window.Blob) {
readFile(storedFiles[i], function(e) {
var html = "<div><img class='selFile' src=\"" + e.target.result + "\" data-file='" + "name" + "' title='Click to remove'>" + "get name and size" + "<br clear=\"left\"/></div>";
$("#div_upload").append(html);
});
} else {
srcc = '../background_site/close.png';
handleFileSelect3(storedFiles[i], i);
}
} else if (chkename4 == '.zip') {
srcc = '../background_site/zip.png';
handleFileSelect3(storedFiles[i], i);
} else if (chkename4 == '.rar') {
srcc = '../background_site/rar.png';
handleFileSelect3(storedFiles[i], i);
} else if (chkename4 == '.pdf') {
srcc = '../background_site/pdf.png';
handleFileSelect3(storedFiles[i], i);
} else {
srcc = '../background_site/wring.png';
handleFileSelect3(storedFiles[i], i);
}
};
});
function handleFileSelect3(evt, nmber) {
var f = evt;
var i = nmber;
var filnameonarry2 = f.name;
var filsizeonarry2 = Math.round((Math.abs(parseInt(f.size)) * 0.000000954) * 1000) / 1000;
var html = "<div> <img class='selFile' id='img_" + i + "' src='" + srcc + "' alt=''> " + filnameonarry2 + " " + filsizeonarry2 + "<br clear=\"left\"/></div>";
$("#div_upload").append(html);
}
});
.selFile {
width: 200px;
height: 200px;
float: left;
margin-bottom: 10px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input id="btn" name="btn" type="button" value="get view">
<input type="file" id="file_input" name="files[]" multiple />
<div id="div_upload"></div>
<div id="spaneaddfile" class="foo"></div>