你好，html上传文件的代码如下：
<input type="file" name="fileUpload" /><input type="submit" value="上传文件" />
至于你要说的有个区域显示图片的，这个需要配合前端开发才可以，单纯的html代码是做不到的，谢谢。
用到Jquery插件 <div class="aa"></div><div class="bb"></div>添加节点： $(".aa").append(".bb")节点aa后面添加bb节点 删除节点： $(".bb").remove()删除最后一个节点$(".bb:last").remove() 上传图片预览: $("#flie").change(function(){ //上传 控件 上传的 预览 $("#img1").attr("src","file:///"+$("#flie").val()) }) <input id="flie" name="flie" type="file" /><br> <img id="img1" width="500" height="200" src="">单纯的 JS 不能实现文件上传，仅能做预览（而且还要看浏览器的隐私设置是否允许）。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function showImage()
{
// 获取文件路径
var path = document.getElementById('upload').value
// 显示文件路径
document.getElementById('imgName').innerHTML = path
// 创建 img
var img = document.createElement('img')
// 载入图像
img.src = path
// 插入图像到页面中
document.getElementById('imgPrev').appendChild(img)
}
</script>
<table border="1" style="width:1000px" >
<tr class="midTable1td1" style="height:50px">
<td align="center">图片描述</td>
<td align="center">图片</td>
<td align="center"> *** 作</td>
</tr>
<tr class="midTable1td2" style="height:200px">
<td id="imgName" class="inputContent" align="center" >显示图片名</td>
<td id="imgPrev" align="center">显示图片</td>
<td align="center"><input type="button" name="Submit2" value="删除" class="button"></td>
</tr>
</table>
<form>
<input type="file" id="upload" onChange="showImage()"/>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）