分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

BBS功能之Ajax上传图片

发布时间:2023-09-06 01:12责任编辑:顾先生关键词: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上传图片

原文地址:http://www.cnblogs.com/lipingzong/p/7567508.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved