相关疑难解决方法(0)

我正在使用Javascript FileReader在浏览器中加载图像:

e = e.originalEvent;
e.dataTransfer.dropEffect = 'copy';
this.documentFile = e.dataTransfer.files[0];

var reader = new FileReader();
reader.onloadend = function () {
    if (reader.result) {
        console.log(reader);
        $('#theImage').attr('src', reader.result);
    }
};
reader.readAsDataURL(this.documentFile);

这很好用.我现在想获得图像的原始文件名,但我不知道如何在互联网上查找我也找不到任何东西？

有人知道如何通过FileReader获取文件名吗？欢迎所有提示!

使用Javascript中的新File API,您可以在Javascript中读取文件以创建dataURL以显示客户端的客户端图片.我想知道你是否可以在FileReader的onload回调中访问File对象.我将用一个例子来说明这一点:

var div = document.createElement('div');
div.ondrop = function(e) {
  e.preventDefault();
  e.stopPropagation();
  var files = e.dataTransfer.files;
  for ( var i=0; i<files.length; i++ ) {
    var file = files[i]; // this is the file I want!!
    var filereader = new FileReader();
    filereader.onload = function(e) {
      this; // the FileReader object
      e.target; // the same FileReader object
      this.result; // the dataURL, something like data:image/jpeg;base64,.....
      var img = document.createElement('img');
      img.src = this.result;
      img.title = file.fileName; // This won't be working
      document.appendChild(img);
    }
  } …

我有以下代码:

<input type="file" multiple='multiple'>
<div id="thumbs"></div>

<script type="text/javascript">
    $('input[type="file"]').change(function() {
    $('#thumbs').html('');
    $.each(this.files, function() {
    readURL(this);
 })
});

function readURL(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
    $('#thumbs').append('<img src="' + e.target.result + '" width="20%">')
    $('#quantity').text(i)
  }
  reader.readAsDataURL(file);
}
</script>

这是一个多上传输入.当我选择"x"图片时,它会为它们创建缩略图.这完全有效,但我想知道如何获取文件名(如果图片名为"sun.jpg",我想得到"sun"),并将它们附加到图片中.我试过这个:

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+e.name+'</p>')

不过e.name是undefined.

这是一切的小提琴:https://jsfiddle.net/ugs6rzqx/1/

任何帮助,将不胜感激.谢谢.

我正在为网站上传一个简单的脚本。我有一个<input type = 'file' name = 'files[]' id = 'hiddenFile' multiple>由div点击触发的多文件输入。当我将文件排队时，我希望能够删除其中一个文件。我知道我可以遍历$('#hiddenFile').val()and拼接来获取名称，但是在确定文件名时遇到了问题。将文件分配给新的img容器时，如何获取名称？我已经尝试console.log(f.name)了一些变体，但是它返回了未定义的错误。这是我的脚本。我想我已经很接近了，但这是我正在学习的东西。谢谢！

function readURL(input) {
var files = $('#hiddenFile')[0].files; //where files would be the id of your multi file input
//or use document.getElementById('files').files;

    for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(f.name); //how can I get the 
                                 //file name here to add it to the image as an attribute?
            $("<img src = …