Django之利用ajax实现图片预览
利用ajax实现图片预览的步骤为：
程序实现的方法为：
方法一：
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="/static/js/jquery-1.12.4.js"></script>
<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>
<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>
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>
Views.py
def upload(request):
return render(request,'upload.html') def upload_file(request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa') import os
img_path = os.path.join('static/image/',fafafa.name) #存储的路径
with open(img_path,'wb') as f: #图片上传
for item in fafafa.chunks():
f.write(item) ret = {'code': True , 'data': img_path} #'data': img_path 数据为图片的路径，
import json
return HttpResponse(json.dumps(ret)) #将数据的路径发送到前端
前端的效果为：
之后，可以看到
看此时的后台数据
可以看到此时的这张图片已经被保存在一个名为image的文件夹中
方法二（直接将图片进行预览，无需提交）：
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="/static/js/jquery-1.12.4.js"></script>
<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>
<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();" />
value="Form提交"/>#}
</form> <div id="preview"></div>
<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();
}
</script>
</body>
</html>
Views.py
def upload(request):
return render(request,'upload.html') def upload_file(request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa') import os
img_path = os.path.join('static/image/',fafafa.name) #存储的路径
with open(img_path,'wb') as f: #图片上传
for item in fafafa.chunks():
f.write(item) ret = {'code': True , 'data': img_path} #'data': img_path 数据为图片的路径，
import json
return HttpResponse(json.dumps(ret)) #将数据的路径发送到前端
前端的效果为：
选择文件后的效果为：
后台的效果为：
图片被成功存储在image文件中
Django之利用ajax实现图片预览的更多相关文章
- 【django】ajax，上传文件，图片预览
1.ajax 概述: AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- H5-FileReader实现图片预览&Ajax上传文件
图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
随机推荐
- PHP中大括号用法
Php中"{}"大括号的用法总结 在PHP中,大括号“{}”可以起到如下作用: 1.将多个独立语句合并为一个复合语句,例如 if ... else ...中经常如此使用 2.在变量 ...
- jquery截取手机号中间4位数,然后变为*
$(function() { var phone = $('#phone').text(); var mphone = phone.substr(0, 3) + '****' + phone.subs ...
- FZU2121_神庙逃亡
水题.直接解二次方程判断点的高度即可. #include <iostream> #include <cstring> #include <cstdio> #incl ...
- 【bzoj1430】小猴打架 Prufer序列
题目描述 给出 $n$ 个点,每次选择任意一条边,问这样 $n-1$ 次后得到一棵树的方案数是多少. 输入 一个整数N. 输出 一行,方案数mod 9999991. 样例输入 4 样例输出 96 题解 ...
- Authenticator及AuthenticationStrategy
Authenticator的职责是验证用户帐号,是Shiro API中身份验证核心的入口点: 如果验证成功,将返回AuthenticationInfo 验证信息:此信息中包含了身份及凭证:如果验证失败 ...
- hive 连接（join）查询
1.内连接 hive> select b.*,a.name from userinfo2 b,userinfo a where a.userid=b.userid; hive> selec ...
- elasticsearch 第一篇(入门篇)
介绍 elasticsearch是一个高效的.可扩展的全文搜索引擎 基本概念 Near Realtime(NRT): es是一个接近实时查询平台,意味从存储一条数据到可以索引到数据时差很小,通常在1s ...
- 【BZOJ1492】【NOI2007】货币兑换（动态规划，CDQ分治，Splay）
[BZOJ1492][NOI2007]货币兑换(动态规划,CDQ分治,Splay) 题面 BZOJ 洛谷 Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券 ...
- 【bzoj4591】超能粒子炮·改
Portal-->bzoj4591 Solution 首先这个模数是一个质数 然后看一下那个\(k\)和\(n\)的范围..行吧Lucas定理咯 但是如果直接求: \[ \sum\limits_ ...
- python基础----多态与多态性、super函数用法、继承原理
一.多态与多态性 ㈠多态: 多态指的是一类事物有多种形态, ...