ajax 图片上传并且显示
Posted ayanboke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax 图片上传并且显示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html5 Ajax 上传文件</title>
<style type="text/css">
#imgshow
width: 500px;
height: 300px
</style>
<script type="text/javascript">
function UpladFile()
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var FileController = "aa.php"; // 接收上传文件的后台地址
// FormData 对象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表单数据
form.append("file", fileObj); // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function ()
// alert("上传完成!");
;
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);
function changeimg()
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var srcs = getObjectURL(fileObj); //获取路径
document.getElementById("imgshow").src=srcs
function progressFunction(evt)
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable)
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
function getObjectURL(file)
var url = null;
if (window.createObjectURL != undefined)
url = window.createObjectURL(file)
else if (window.URL != undefined)
url = window.URL.createObjectURL(file)
else if (window.webkitURL != undefined)
url = window.webkitURL.createObjectURL(file)
return url
;
</script>
</head>
<body>
<span id="percentage"></span>
<br />
<input type="file" onchange="changeimg()" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<div>
<img src="#" id="imgshow">
</div>
</body>
</html>
直接在aa.php里面打印就可以了
以上是关于ajax 图片上传并且显示的主要内容，如果未能解决你的问题，请参考以下文章