ajax 上传图片预览

最新推荐文章于 2025-08-13 22:02:33 发布

原创最新推荐文章于 2025-08-13 22:02:33 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #图片预览

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML表单示例，演示了如何使用JavaScript和AJAX技术实现表单数据的异步发送及图片预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css">
img{
width:200px;
}
</style>

//数据使用ajax 发送到另一个页面,不跳转

//获取文件对象

var pic = document.getElementsByName('pic')[0].files[0];
console.log(pic);
var fd = new FormData(); //html5中

fd.append('pic',pic); //将图片加到 formdata中
var tmpimg = document.createElement('img'); //创建img标签
tmpimg.src = window.URL.createObjectURL(pic); //创建img 的src属性,并赋值
document.getElementsByTagName('body')[0].appendChild(tmpimg);
//把img 标签 (强制)加载到body中显示;
}
</script>
</head>
<body>
<form id="aform">
<p>用户名<input type="text" name="user" >
<p>年龄<input type="text" name="age" >
<p>邮箱<input type="text" name="email" >
<input type="button" onclick="fa();" value="发送">

<p>
<input type="file" name="pic">
<input type="button" onclick="prew();" value="预览">
</form>
<div id="show"></div>
</body>
</html>