php代码
<?php
header('Access-Control-Allow-Origin:*');
function upload(){
// 获取上传的图片
// print_r($_FILES);exit;
$pic = $_FILES['myfile']['tmp_name'];
$upload_ret = false;
if($pic){
// 上传的路径，建议写物理路径
$uploadDir = '../uploadimg';
// 创建文件夹
if(!file_exists($uploadDir)){
mkdir($uploadDir, 0777);
}
// echo $uploadDir;exit;
// 用时间戳来保存图片，防止重复
$targetFile = $uploadDir . '/' . time() . $_FILES['myfile']['name'];
// 将临时文件 移动到我们指定的路径，返回上传结果
$upload_ret = move_uploaded_file($pic, $targetFile);
}
if($upload_ret){
return $targetFile;
}else{
return "123";
}
}
$a=upload();
echo json_encode($a);
前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax+PHP实现异步图片上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
#feedback{
height: 200px;
text-align: center;
height: 160px;
border: 1px solid silver;
border-radius: 3px;
}
#feedback img{
margin:3px 10px;
border: 1px solid silver;
border-radius:3px;
padding: 6px;
width: 35%;
height: 85%;
}
#feedback p{
font-family: "微软雅黑";
line-height: 120px;
color: #ccc;
}
.file {
position: relative;
display: inline-block;
border: 1px solid #1ab294;
border-radius: 4px;
padding: 8px 16px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
color: #1ab294;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.box{
margin-top: 10px;
text-align: center;
}
.box a{
margin-left: 10px;
}
</style>
</head>
<body>
<input type="file" name="pic" id="id1" onchange="upload()"/>
<!-- <button type="button" class="YL" onclick="upload()">上传</button> -->
<script type="text/javascript">
//上传图片
// $("#id1").on("change",function(){
// upload()
// })
function upload(){
var forms = new FormData(); console.log(forms);
forms.append("myfile", document.getElementById("id1").files[0]);
// var forms = document.getElementById("id1").files[0];
console.log(forms)
console.log('1');
$.ajax({
url:"up.php",
type:"POST",
data:forms,
cache: false,
contentType: false,//不可缺参数
processData: false,//不可缺参数
success:function (result){
console.log(result);
},
error:function (result){
alert("sfd");
}
});
}
</script>
</body>
</html>
