ajax上传图片
图片时一般要做下预览,需要分步先提交图片,但一般的ajax提交不能够完成文件的上传,这时我们就需要借助jquery的formData 这一对象来完成文件的上传(引入jquery.form.js).
html代码
<html>
<head>
<title>AJAX Upload Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<style>
#imgbox{width:1200px;margin:0 auto;}
#imgbox img{float:left;width:300px;height:300px;}
</style>
</head>
<body>
<div>
<form id="submit_form" method="post" action="" enctype="multipart/form-data">
<input type="file" name="upload_file" id="upload_file">
<input type="text" name="test_text" id="test_text" value="test">
<input type="submit" value="确定">
</form>
<div id="imgbox">
<img src="" id="imgs" >
</div>
</div>
<script type="text/javascript">
$("#submit_form").submit(function(){
if($("#upload_file").val()==''){
alert("请选择要上传的文件");
return false;
}
var formData = new FormData($("#submit_form")[0]);
// console.log(formData);return false;
$.ajax({
debug:true,
url:'upload.php',
type: 'POST',
async: false,
cache: false,
data:formData,
processData: false,
contentType: false,
dataType:"json",
beforeSend: function(){
uploading = true;
},
success : function(data) {
if (data.status == 1) {
$("#imgs").attr("src", data.src);
} else {
alert("上传出错");
return false;
}
uploading = false;
}
})
return false;
})
</script>
</body>
</html>
php代码(upload.php)
<?php
// var_dump($_POST);
// var_dump($_FILES);
// var_dump($_FILES['upload_file']);
if (file_exists("upload/" . $_FILES["upload_file"]["name"])){
// echo $_FILES["file"]["name"] . " already exists. ";
echo json_encode(['status'=>0,'msg'=>"上传失败"]);exit;
}else{
$test=move_uploaded_file($_FILES["upload_file"]["tmp_name"],"upload/" . $_FILES["upload_file"]["name"]);
if($test){
echo json_encode(['status'=>1,'src'=>"upload/" . $_FILES["upload_file"]["name"]]);exit;
}else{
echo json_encode(['status'=>0,'msg'=>"上传失败"]);exit;
}
}
源文件地址:upload_ajax_img
参考文章:
1.http://yunzhu.iteye.com/blog/2177923
2.https://www.cnblogs.com/zzgblog/p/5417969.html
3.http://blog.csdn.net/inuyasha1121/article/details/51915742