如何获取图像Javascript的名称和大小

时间:2016-09-24 11:16:11

标签: javascript jquery html

如何获取图像的名称和大小? (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>

0 个答案:

没有答案