Как прикрепить изображение, имя и размер файла к таблице td как href

Я хочу прикрепить изображение, его имя и размер файла для отображения в теге <a> внутри таблицы <td> как href. Но во время щелчка я получаю ошибку Uncaught TypeError: td.appendChild is not a function at Image.img.onload. Любая помощь по этому поводу будет очень признательна?

    function upload(){
      var img = new Image();
      var td = $('.someclass>tbody>tr>td>a');
      img.onload = function() {
        td.appendChild(img+fileName);
      };
      img.src = 'file:///C:/somename/Tests/avatar.JPG'; 
      var fileName = img.replace(/^.*[\\/]/, '');
    }
    <table class = "someclass"> 
    <tbody>
      <tr>
        <td class = "filename">
          <a target = "_blank" href = "http://somelink.com"></a>
        </td> 
        <td class = "filesize">
        </td>
      </tr>
     </tbody>
    </table>
    <div class = "rtggBJHGHGH123JHGH">
    <span>Upload</span>
    <input onclick= "upload();" type = "file" name = "file">  
    </div>
td в данном случае является объектом jQuery. jQuery не предоставляет метод appendChild. Просто используйте метод append(), который у него есть
Taplar 26.10.2018 00:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
72
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку вы назначаете объект jQuery своей переменной, вы можете напрямую использовать метод append():

...
var td = $('.someclass>tbody>tr>td>a');
img.onload = function() {
    td.append(img);
};
...

Кроме того, поскольку вы определили img как объект изображения, вы должны вызвать атрибут src в своем операторе replace(), а также добавить объекты независимо:

...
img.src = 'file:///C:/somename/Tests/avatar.JPG'; 
var fileName = img.src.replace(/^.*[\\/]/, '');
img.onload = function() {
    td.append(img).append(fileName);
};
....

Вы можете использовать метод jQueries .append(), чтобы добавить данные изображения и имени файла в выбранную ячейку таблицы <td />. Кроме того, чтобы извлечь данные об имени и размере для файла / изображения, выбранного из элемента ввода файла, рассмотрите возможность использования API FileReader:

function upload(event){

  // Extract file from event
  var file = event.currentTarget.files[0];
  if (!file)
  {
    return;
  }

  // Use a file reader to access data from file field
  var reader = new FileReader();
  
  reader.onload=function(event)
  {

    var img = new Image(); 
    img.onload=function()
    {
  	var td = $('.someclass>tbody>tr>td>a');
      
    	// If image loaded from file, append it to your td
    	td.append(img);
            
	// Extract name from file object and append it to your td
        td.append($('<p>').text('Name:' + file.name))
  
    	// Extract size from file object and append it to your td
        td.append($('<p>').text('Size:' + file.size))
    }
    img.src=event.target.result;
    
  }
  
  // Pass file to file reader
  reader.readAsDataURL(file);
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table class = "someclass"> 
<tbody>
  <tr>
    <td class = "filename">
      <a target = "_blank" href = "http://somelink.com"></a>
    </td> 
    <td class = "filesize">
    </td>
  </tr>
 </tbody>
</table>
<div class = "rtggBJHGHGH123JHGH">
<span>Upload</span>
<!-- Correct input to pass event data to upload() -->
<input onchange = "upload(event);" type = "file" name = "file">  
</div>

Один вопрос, где мне давать путь к образу file:///C:/somename/Tests/avatar.JPG'

soccerway 26.10.2018 00:35

Привет @soccerway, используя приведенный выше ответ, путь к изображению предоставляется пользователем, когда файл выбирается с помощью ввода селектора файлов - обычно вы обнаружите, что браузеры затрудняют доступ к файлам непосредственно из вашей файловой системы с помощью таких путей к файлам : file:///C:/somename/Tests/avatar.JPG надеюсь что поможет!

Dacre Denny 26.10.2018 00:37

Другие вопросы по теме