ajax原生图片上传
2018-10-27 本文已影响0人
奋斗live
以下是我的目录结构
image.png
test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#files{opacity:0;width:50px;position:relative;left:-50px;top:-10px;}
#pic{width:50px;}
</style>
<body>
<div>
<form action="http://localhost/test.php" method="post" enctype="multipart/form-data">
First name:<br>
<img src="add.png" id="pic">
<input type="file" id="files" onchange="fileImport(this)">
</form>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
function fileImport(obj) {
//获取读取我文件的File对象
var docObj = document.getElementById('files');
var selectedFile = docObj.files[0];
var imgObj = document.getElementById('pic');
img_url = window.URL.createObjectURL(selectedFile);
imgObj.src=img_url;
imgObj.onload=function(e){
console.log(imgObj);
}
var form = new FormData();
form.append('image',docObj.files[0]);
$.ajax({
url:"http://localhost/test/test.php",
type:'POST',
cache:false,
data:form,
processData: false,
contentType: false,
async: false,
success:function(result){
alert('gege');
}
})
}
</script>
</body>
</html>
test.php
<?php
echo "<pre>";
print_r($_FILES);die;
