Я хочу прикрепить изображение, его имя и размер файла для отображения в теге <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>
Поскольку вы назначаете объект 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, используя приведенный выше ответ, путь к изображению предоставляется пользователем, когда файл выбирается с помощью ввода селектора файлов - обычно вы обнаружите, что браузеры затрудняют доступ к файлам непосредственно из вашей файловой системы с помощью таких путей к файлам : file:///C:/somename/Tests/avatar.JPG
надеюсь что поможет!
td
в данном случае является объектом jQuery. jQuery не предоставляет методappendChild
. Просто используйте методappend()
, который у него есть