<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jq 文件上传 ajax</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="file" name="file">
<img src="" id="img" width="300" alt="">
<script>
$(function(){
$('input:file').change(function(){
console.log('123')
//创建表单对象
var formD = new FormData()
//向表单对象添加文件
//this当前事件对应的js对象,files是数组
var that = this
formD.append('file',this.files[0])//添加名称为file的文件
$.ajax({
//服务器地址
url:'https://www.520mg.com/ajax/file.php',
type:'POST',//请求方式
data:formD,//请求的数据
processData:false, //告诉jQuery不要去处理发送的数据
contentType:false, //告诉jQuery不要去设置Content-Type请求头
success:function(r){//成功处理
r = JSON.parse(r).pic //转换json,获取图片地址
console.log(r)
$('body').append(`<img src="https://www.520mg.com${r}" width='300'>`)//向body内添加图片
$(that).val('');//置空this指向的input值(上传文件提示文件名)
},
error:function(e){ //失败处理
console.log(e)
}
})
})
})
</script>
</body>
</html>
jq的ajax上传文件
最新推荐文章于 2024-08-21 08:34:53 发布