BBS功能之Ajax上传图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BBS功能之Ajax上传图片相关的知识，希望对你有一定的参考价值。
1. 先设置路由
url(r‘^upload_img‘, upload_img),
2. 建立函数
def upload(request):
return render(request,‘upload.html‘)
3. 编写upload.html
//这次我们先学jquery方式
<body>
<h1>上传图片</h1>
<input type="file" name="fafafa">
<input type="button" value="点我点我" onclik = "uploadImg()">
<script src="/static/jquery-3.2.1.js"></script>
<script>
function uploadImg() {
}
})
}
</script>
</body>
4. 运行一下页面
5. 继续编写 upload.html
<body>
<h1>上传图片</h1>
<input id="fafafa" type="file" name="fafafa">
<input type="button" value="点我点我" onclik = "uploadImg()">
<script src="/static/jquery-3.2.1.js"></script>
<script>
function uploadImg() {
//获取文件
//上传文件
//预览
var formData = new FormData(); //data对象 上传的图片先给这个对象然后传递给data
formData.append(‘a1‘,$(‘#fafafa‘)[0].files[0]); // 这就是取到的图片文件 固定格式
console.log(formData);
$ajax({
url:‘/upload_img/‘,
type:‘POST‘,
data:formData, //数据上传到后台
prosessData:false,
contentType:false,
success:function (arg) {
console.log(arg)
}
})
}
</script>
</body>
6. 建立函数 upload_img
def upload_img(request):
obj = request.FILES.get(‘a1‘)
print(obj)
return HttpResponse(‘999‘)
7. 继续完善函数
def upload_img(request):
obj = request.FILES.get(‘a1‘)
with open(obj.name,mode=‘wb‘) as f:
for chunk in obj.chunks():
f.write(chunk)
return HttpResponse(‘999‘)
8.
以上是关于BBS功能之Ajax上传图片的主要内容，如果未能解决你的问题，请参考以下文章