34)django-上传文件,图片预览功能实现
目录
文件上传
1）form表单提交上传（会刷新）
2）ajax上传
3）iframe
4)图片上传预览（思路保存文件的时候，把文件保存文件的路径反馈回，客户端直接访问图片地址）
原生ajax和ajax,这两个都依赖于FormData对象，但是底板浏览器不支持。
iframe都支持(大部份网站都采用这种方式，什么版本浏览器都支持。
时机：
如果发送的是文件-->iframe,jquery,(formdata),XMLHTTPReuqest(Formdata)
考虑浏览器版本兼容，推荐iframe方式。
一：ajax原生实现上传
#ajax原生实现上传
#urls.py
url(r'^upload/$',views.upload),
url(r'^upload_file/$',views.upload_file), #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: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</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="uploadXHR();"> <script>
//使用原生ajax实现上传
function uploadXHR(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象 //设置原生ajax对象
var xhr= new XMLHttpRequest()
xhr.open("POST","/upload_file/",true);
//回调函数，当状态变化时触发
xhr.onreadystatechange=function(){
//4是表示所有数据接受完了
if (xhr.readyState==4){
//获取返回值
console.log(xhr.responseText) //返回的是字符串
//转对象
JSON.parse(xhr.responseText)
} }
//上传文件不需要设置请求头
xhr.send(formdata);//发送的数据只能是字符串 }
</script>
</body>
</html> #views.py
def upload_file(request):
username=request.POST.get("username")
file_obj=request.FILES.get("fafafa")
print(username,file_obj)
with open(file_obj.name,'wb') as f:
for item in file_obj.chunks():
f.write(item)
ret={"status":False,"data":request.POST.get("username")}
return HttpResponse(json.dumps(ret))
二：ajax jquery实现上传
##ajax jquery实现上传
#upload.html
<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="提交jqury" onclick="uploadJquery();">
<script src="/static/jquery-1.12.4.js"></script>
<script>
//jqury实现上传
function uploadJquery(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象,可以被send发送
$.ajax({
url: '/upload_file/',
type: 'POST',
data: formdata,
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);
}
})
}
三：iframe实现上传
##iframe实现上传
<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" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<script>
//使用iframe实现上传
function iframeSubmit(){
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
console.log(content);
}
)}
<script>
def upload_file(request):
username=request.POST.get("username")
file_obj=request.FILES.get("fafafa")
print(username,file_obj)
with open(file_obj.name,'wb') as f:
for item in file_obj.chunks():
f.write(item)
ret={"status":False,"data":request.POST.get("username")}
return HttpResponse(json.dumps(ret))
四：上面3种完整示例
##上面3种完整示例
#urls.py
url(r'^upload/$',views.upload),
url(r'^upload_file/$',views.upload_file), #views.py
def upload_file(request):
username=request.POST.get("username")
file_obj=request.FILES.get("fafafa")
print(username,file_obj)
with open(file_obj.name,'wb') as f:
for item in file_obj.chunks():#一点一点上传
f.write(item)
ret={"status":False,"data":request.POST.get("username")}
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: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</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="uploadXHR();">
<input type="button" value="提交jqury" onclick="uploadJquery();"> <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" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
//jqury实现上传
function uploadJquery(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象,可以被send发送 $.ajax({
url: '/upload_file/',
type: 'POST',
data: formdata,
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);
}
})
} //使用原生ajax实现上传
function uploadXHR(){
//首先获取值
//$("#fafafa")[0]==document.getElementById("fafafa")
//files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0，
var file_obj=document.getElementById("fafafa").files[0]
//这里file_obj是对象，send发送的是字符串，所以不能直接发送
var formdata=new FormData();//FormData表示是一个form表单
formdata.append("username","root");//key ,value
formdata.append("fafafa",file_obj);//可以加对象 //设置原生ajax对象
var xhr= new XMLHttpRequest()
xhr.open("POST","/upload_file/",true);
//回调函数，当状态变化时触发
xhr.onreadystatechange=function(){
//4是表示所有数据接受完了
if (xhr.readyState==4){
//获取返回值
console.log(xhr.responseText) //返回的是字符串
//转对象
JSON.parse(xhr.responseText)
} }
//上传文件不需要设置请求头
xhr.send(formdata);//发送的数据只能是字符串 } //使用iframe实现上传
function iframeSubmit(){
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
console.log(content);
}
)}
</script>
</body>
</html>
五：预览图片功能实现
##图片预览
<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" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form>
<!--用来图片预览显示-->
<div id="preview"></div> //使用iframe实现上传
function iframeSubmit(){
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(content); $("#preview").empty();//如果里面有标签先清空
var imgTag=document.createElement("img");
imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/"
$("#preview").append(imgTag); }
)} ##图片预览改进（不点提交，给input file绑定onchange()事件，一改变就提交表单）
<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="ChangeFile();"/>
</form>
<!--用来图片预览显示-->
<div id="preview"></div> <script>
function ChangeFile(){
//先给iframe绑定load事件
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取下面的元素先用contains.
var content=$('#ifm1').contents().find('body').text();
var obj=JSON.parse(content); $("#preview").empty();//如果里面有标签先清空
var imgTag=document.createElement("img");
imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/"
$("#preview").append(imgTag); }
)
//改变事件提交表单
$("#form1").submit();
}
</script>
34)django-上传文件,图片预览功能实现的更多相关文章
- 关于confluence上传文件附件预览查看时出现乱码的问题解决办法
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
- confluence上传文件附件预览乱码问题（linux服务器安装字体操作）
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...
- 分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- Java Spring Boot 上传文件和预览文件地址解析
@RequestMapping(value ="/upload",method = RequestMethod.POST) @Permission(isAjax=false) pu ...
- django 上传头像并预览 3选1
注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...
- javascript实现文件上传之前的预览功能
1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group"> <label fo ...
- jquery实现图片上传前本地预览功能
HTML <img id="pic" src="" > <input id="upload" name="fil ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
随机推荐
- SpringBoot入门笔记(三)、热加载
1.配置热加载环境,在pom.xml添加如下代码 <build> <!--springloader plugin --> <plugins> <plugin& ...
- 【五】服务熔断、降级 —— Hystrix（豪猪）
分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖,每个依赖关系将在某些时候将不可避免地失败. 服务雪崩 多个微服务之间调用的时候,假设微服务A调用微服务B和微服务C,微服务 B和微服务 ...
- 【noip 2016】普及组
T1.买铅笔 题目链接 #include<cstdio> #include<algorithm> #include<cstring> using namespace ...
- 利用PHP连接数据库操作用户注册、审核与登录页面
注册页面 <body ><h1>注册页面</h1><form action="zhucechuli.php" method="p ...
- JQuery之Attr()与Prop()方法
一.Prop()的由来 JQuery 1.6开始 新增方法prop() prop()解决:表单元素中checked,selected,disabled等属性在方法attr()中可能会出现的不一致问题( ...
- TensorFlow从入门到理解（六）：可视化梯度下降
运行代码: import tensorflow as tf import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.m ...
- Python 15 html 基础 - CSS &javascript &DOM
本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...
- Coconuts HDU - 5925 (二维离散化求连通块的个数以及大小)
题目链接: D - Coconuts HDU - 5925 题目大意:首先是T组测试样例,然后给你n*m的矩阵,原先矩阵里面都是白色的点,然后再输入k个黑色的点.这k个黑色的点可能会使得原先白色的点 ...
- MySql cmd下的学习笔记 —— 有关常用函数的介绍（数学函数，聚合函数等等）
(一)数学函数 abs(x) 返回x的绝对值 bin(x) 返回x的二进制(oct返回八进制,hex返回十六进制) ceiling(x) ...
- POJ 3253 Fence Repair （贪心）
题意:将一块木板切成N块,长度分别为:a1,a2,……an,每次切割木板的开销为当前木板的长度.求出按照要求将木板切割完毕后的最小开销. 思路:比较奇特的贪心 每次切割都会将当前木板一分为二,可以按切 ...