django 笔记16 文件上传笔记
views.py文件
def upload_file(request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa')
import os
img_path = os.path.join('static/imgs/',fafafa.name)
with open(img_path,'wb') as f:
for item in fafafa.chunks():
f.write(item) ret = {'code': True , 'data': img_path}
import json
return HttpResponse(json.dumps(ret))
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: ;
bottom: ;
right: ;
left: ;
z-index: ;
}
.file{
width: 100px;height: 50px;opacity: ;
position: absolute;
top: ;
bottom: ;
right: ;
left: ;
z-index: ;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload">上传</a>
</div>
<input type="button" value="提交XHR" onclick="xhrSubmit();" />
<input type="button" value="提交jQuery" onclick="jqSubmit();" />
<hr/> <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpalod();" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form> <div id="preview"></div> <script src="/static/jquery-1.12.4.js"></script>
<script>
function changeUpalod(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text); $('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
});
$('#form1').submit();
} function jqSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[]; var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); $.ajax({
url: '/upload_file/',
type: 'POST',
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
} function xhrSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[]; var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj); var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload_file/',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == ){
// 接收完毕
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
xhr.send(fd);
} function iframeSubmit(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
//
$('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
})
} </script>
</body>
</html>
django 笔记16 文件上传笔记的更多相关文章
- Django:学习笔记(8)——文件上传
Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...
- SpringMVC:学习笔记(8)——文件上传
SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...
- 第三百一十九节,Django框架,文件上传
第三百一十九节,Django框架,文件上传 1.自定义上传[推荐] 请求对象.FILES.get()获取上传文件的对象上传对象.name获取上传文件名称上传对象.chunks()获取上传数据包,字节码 ...
- springmvc学习笔记--支持文件上传和阿里云OSS API简介
前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...
- 超全面的JavaWeb笔记day22<文件上传>
文件上传概述 1 文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2 文件上传对页面的要求 上传文件的要求比较多,需要记一下: 1. 必须使用 ...
- 16.Django学习之文件上传和下载
上传就这么六步! 一. settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').repl ...
- struts2 笔记02 文件上传、文件下载、类型转换器、国际化的支持
Struts2的上传 1. Struts2默认采用了apache commons-fileupload 2. Struts2支持三种类型的上传组件 3. 需要引入commons-fileupload ...
- Struts2学习笔记(十一)——文件上传
1.单文件上传 单文件上传步骤: 1)创建上传jsp页面 文件上传的表单提交方式必须是POST方式,编码类型:enctype="multipart/form-data",默认是 a ...
- go web 第二天 学习笔记之文件上传
package main import ( "crypto/md5" "fmt" "html/template" "io" ...
随机推荐
- 仿hibernate,spring框架手动写
近期学习了hibernate底层技术和spring 的底层技术,认为非常不错,所以想分享下,要是说的不够具体.能够去下载资源自己查看下载链接 技术的体现是在实际中的.如今大体介绍一下吧 首先介绍hib ...
- 手势跟踪论文学习:Realtime and Robust Hand Tracking from Depth(三)Cost Function
iker原创.转载请标明出处:http://blog.csdn.net/ikerpeng/article/details/39050619 Realtime and Robust Hand Track ...
- Hibernate关系映射中的注解
一.@Entity 写在映射表的类上面,表示这是映射来的实体 二.@Id @Column(name = "fid", nullable = false) @Basic @Colum ...
- Educational Codeforces Round 6 C. Pearls in a Row set
C. Pearls in a Row There are n pearls in a row. Let's enumerate them with integers from 1 to n from ...
- JAVA设计模式之【建造者模式】
建造者模式 建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品 角色 Builder抽象建造者 buildPartX getResult ConcreteBuilder具体建 ...
- 今天犯的一个错误,导致method GET must not have a request body
事件经过: 1.在本地机器运行完全正常的程序,手动人工发包到测试环境上,后台日志频频报method GET must not have a request body. 2.使用postman发送pos ...
- Servlet基础(一)
JavaEE:企业级开发技术 <一.基础概念>j2ee:jdk1.1--1.4 ----->> j2ee1.1 1.2 javaee:jdk--5,6,7 ...
- POJ 3723 Conscription (Kruskal并查集求最小生成树)
Conscription Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14661 Accepted: 5102 Des ...
- 转:EL表达式
简介: EL 全名为 Language ,JSP2.0 之后,EL 成为了标准规范.因此,只要是支持Servlet2.4/JSP2.0 的容器,就都可以在JSP 网页中直接使用EL . 除了JSP2. ...
- CorelDRAW X6低价再次冲破底线
平时我们看到的标志设计.杂志排版.产品商标.插图描画......这些都是设计师们使用CorelDRAW设计而来.如今CorelDRAW已经成为每个设计师必装的软件,从12年发布CorelDRAW X6 ...