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 ...
随机推荐
- VS2019预览版发布了
VS2019正式版已发布:https://www.cnblogs.com/zhaogaojian/p/10648904.html 1.点击下载https://visualstudio.microso ...
- docker之搭建私有镜像仓库和公有仓库
一.搭建私有仓库 1.docker pull registry #下载registry镜像并启动 2. docker run -d -v /opt/registry:/var/lib/registry ...
- None.js 第一步 开启一个服务 hello world
引入 http 模块 var http = require('http'); 创建服务器 http.createServer(function (request, response) { // 发送一 ...
- 可由inetd启动的协议无关时间获取服务器程序
#include <time.h> #include <stdio.h> #include <stdlib.h> #include <unistd.h> ...
- 哈希函数（hash函数）
hash,—般译为“散列”,也可以直接音译为“哈希”,是对输入的任意长度(又称预映射),通过哈希算法,转换成固定长度的哈希值输出.这种转换是一种压缩映射,即,哈希值空间通常比输入空间小得多,不同的输入 ...
- Mysql 基础导入导出
Mysql 导出数据库: mysqldump -u root -p 数据库 > 导出库名.sql mysqldump -u 用户名 -p 数据库名 表名 > 导出表名.sql 示例:mys ...
- bean的装配方式（注入方式，构造注入，setter属性注入）
bean的装配方式有两种,构造注入和setter属性注入. public class User { private String username; private String password; ...
- 堆（heap）与栈（stack）
编程语言书籍中经常解释: 值类型被创建在栈上,引用类型被创建在堆上. 构造函数,原型之类的算是引用类型吗? 5种基本数据类型有Undefined.Null.Boolean.Number 和 Str ...
- CSS-联合选择器
深层布局,逐级进去,指向某一个标签,叫:关联选择器 - 设置嵌套标签的样式 div p {} day02 昨天内容回顾 1.html的操作思想 ** 使用标签把要操作的数据包起来,通过修改标签的属性值 ...
- 关于xss攻击学习的总结
关于xss攻击,网上相关的介绍很多,一搜索也是一大堆,这里我就对自己感兴趣的一些内容做个总结. xss简单介绍 成因:xss是将恶意代码(多是JavaScript)插入html代码中. 分类: 1. ...