ajax 图片上传并且显示

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>Html5 Ajax 上传文件</title>
<style type="text/css">
#imgshow{
500px;
height: 300px
}
</style>

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>

<br />

</body>

</html>

直接在aa.php里面打印就可以了

ajax 图片上传并且显示

相关推荐