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 ...
随机推荐
- FormatMessage
FormatMessage 获取GetLastError 函数返回的错误代码对应的字符串描述. #include <Windows.h>#include <tchar.h> V ...
- listView item分割线不显示
在华为平板上列表上分割线第一个不显示,增大dividerHeight代码解决 <ListView android:id="@+id/list_view" android:di ...
- 4.mycat部署
1.准备工作 mycat依赖Java环境,所以必须安装jdk yum install java-1.8.0-openjdk-devel.x86_64 配置JAVA_HOME环境变量 ls -lrt / ...
- APPLE-SA-2019-3-25-3 tvOS 12.2
APPLE-SA-2019-3-25-3 tvOS 12.2 tvOS 12.2 is now available and addresses the following: CFStringAvail ...
- C++ 函数的重载和参数默认值
函数的重载和参数默认值视频教程 函数的重载注意事项: 只会根据三项内容进行重载:参数的个数.参数的类型.参数的顺序 参数默认值: 参数的默认值可以在函数的定义中也可以在函数的声明中,但不能同时有 从第 ...
- Ubuntu18.04使用AndroidStudio3.2.1编译TensorFlow android demo【2018年12月】
按照官方教程修改下面3处即可编译完成. 修改部分: 在build.gradle文件里修改以下部分: 1.原来: buildscript { repositories { jcenter() } dep ...
- Empirical Evaluation of Speaker Adaptation on DNN based Acoustic Model
DNN声学模型说话人自适应的经验性评估 年3月27日 发表于:Sound (cs.SD); Computation and Language (cs.CL); Audio and Speech Pro ...
- day 8 - 2 文件操作练习
注册登录 需求: 1.对账号密码的长度进行限制并不允许出现特殊字符 2.把账号密码储存进文件中 3.密码最多输入错误三次 #分别判断注册时账号密码的长度与特殊字符 flag=1 while flag: ...
- tidb调研
TiDB是新一代开源分布式 NewSQL 数据库,相比较于我们常见的数据库MySQL,TiDB具有水平伸缩.强一致性的分布式事务.基于 Raft 算法的多副本复制等特性.同时,TiDB兼容MySQL生 ...
- eclipse快捷键调试总结 -转--快捷键大全
(1)Ctrl+M --切换窗口的大小(2)Ctrl+Q --跳到最后一次的编辑处(3)F2 ---重命名类名 工程名 --当鼠标放在一个标记处出现Tooltip时候按F2则把鼠标移开时To ...