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" ...
随机推荐
- JAVA学习之 异常处理机制
今天就来说说java的异常处理机制,异常处理不是第一接触,尤其是写过非常多c#的代码,基本都会写到异常处理的代码,事实上c#的异常处理与java的异常处理基本都是一样的,仅仅是在一些细节上不是非常一样 ...
- bzoj-1492 货币兑换Cash (1)——平衡树维护凸包
题意: 有n天和m的初始金钱,用来购买AB两种纪念券: n天里每天都有AB的价格.每天能够进行这种操作. 1.卖出手中x%的纪念券(AB分别都卖出x%). 2.用x的金钱买入纪念券.买入AB券的比例在 ...
- Restful技术
一.概述 Restful技术是一种架构风格(Representational State Transfer)表现层状态转化,而不是一种编程标准. 之前前后端混在一起,前端通过mapping映射找到后端 ...
- 【Linux探索之旅】第二部分第三课:文件和文件夹,组织不会亏待你
wx_fmt=jpeg" alt="" style="max-width:100%; height:auto!important"> 内容简单介 ...
- 50个Android开发技巧(12 为控件加入圆角边框)
控件的圆角边框能够使你的App看起来更美观,事实上实现起来也非常easy. (原文地址:http://blog.csdn.net/vector_yi/article/details/24463025) ...
- JAVA设计模式之【模板方法模式】
模板方法模式 提高代码的复用性 把常用的基本方法放入父类中 强调一种流程步骤 角色 抽象类 抽象方法 具体方法 钩子方法 空方法 通过bool控制 具体类 看例子 1.银行模板类 package Te ...
- scanf正则表达式
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> void main() { ] = ...
- 采集电脑摄像头和mic,rtp端口推送音视频工具
介绍:这个是我在做一个rtmp播放的项目中自己写的rtp推送的工具,可选择摄像头,可选择推送rtp的端口和ip 下载地址: github:https://github.com/alexhegang/s ...
- 路飞学城Python-Day14
转载:python之路-路飞学城-python-book [25.常用模块-logging模块详解] [26.常用模块-logging模块详解2] [27.常用模块-logging模块日志过滤和日志文 ...
- (一)React再学习
新公司的技术栈是React,虽然之前对react大概过了一遍,但是自己没有实际落地过项目 再学习一遍react: 一.react全家桶 ·create-react-app ·组件化思维 ·JSX ·开 ...