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 ...
随机推荐
- 十一、移植优化---CONFIG 优化进 menuconfig（2）
11.3 jz2440.h 中的剩余宏移植 11.3.1 CONFIG_SYS_TEXT_BASE CONFIG_SYS_TEXT_BASE:设置系统代码段的基地址,设为 0x0:menuconfig ...
- Inline Route Constraints in ASP.NET Core MVC
原文 ASP.NET MVC5和Web API2的一个新特性是attribute routing, 通过它我们可以使用[Route]来定义路由模板: public class MessagesCont ...
- iOS拍照图片旋转的问题
很久之前,遇到了这种情况,iOS某端拍照上传到服务器,其他iOS端从服务器下载该照片展示,发现图片逆时针旋转了90度.当时百度了一下,找到一段代码修正image方向,问题解决了,但没有深入理解底层原理 ...
- cookie, session, token 是什么 以及相应的安全考量
Cookie cookie 最常见的是用来保存一些账号信息,比如下图里的 记住账号 就是记录到了cookie里面 cookie 更主要的是针对和server通信的,我们知道http 是无状态的,那如果 ...
- linux 截图工具 shutter
ubuntu 安装shutter sudo apt install shutter libgoo-canvas-perl libgoo-canvas-perl是提供对截图编辑功能,例如,添加画框,文字 ...
- JavaScript实现框选效果
<html> <head> <title>region</title> <style> body { margin: 0; padding: ...
- python面向对象--类
1.类的概念:简单来说就是一组符合逻辑的参数或者是函数,一个种类.一个模型. 一个类中可以包含任意参数,并且可以定义任意个方法,但类并不是随意的将多个参数或者方法包含在class下,而是创建一个在事物 ...
- Javascript - ExtJs - TreePanel组件
TreePanel组件(Ext.tree.TreePanel)logogram:Ext.tree.Panel | xtype:treepanel 树与节点 树面板组件的根是源头,从根上拓展出其它的子节 ...
- python练习 之 实践出真知 中心扩展法求最大回文子串 （leetcode题目）
1 问题,给定一个字符串,求字符串中包含的最大回文子串,要求O复杂度小于n的平方. 首先需要解决奇数偶数的问题,办法是:插入’#‘,aba变成#a#b#a#,变成奇数个,aa变成#a#a#,变成奇数个 ...
- 【运维】Dell R710如何开启VT服务
[前言]: 英特尔的硬件辅助虚拟化技术(Virtualization Technology,简称VT技术)是一种设计更简单.实施更高效和可靠的方法. 如果想要在 ...