如何将图像、名称和文件大小附加到表 td 作为 href

Question

我想附加一个图像，它的名称和文件大小，以显示在表格内的<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>

Answer 1

由于您要将 jQuery 对象分配给变量，因此可以直接使用append()方法：

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

此外，由于您将img定义为 Image 对象，因此必须在replace()语句中调用src属性，并独立追加对象：

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

Answer 2

您可以使用jQueries.append()方法将图像和文件名数据添加到选定的<td />表单元格中。此外，要提取从文件输入元素中选择的文件/图像的名称和大小数据，请考虑使用FileReaderAPI：

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>