使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化
后端代码
def upload(request):
if request.method == "GET":
return render(request,'upload.html')
if request.method =="POST":
pass def upload_file(request):
request.POST.get('username')
fafafa = request.FILES.get('fileobj')
img_path = os.path.join('static/img/',fafafa.name)
with open( img_path, 'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'code':True,'data':img_path}
return HttpResponse(json.dumps(ret))
views.py
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
position: relative;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 50%;
} .c2 {
position: absolute;
width: 100px;
height: 30px;
z-index: 10;
opacity: 0;
top: 0;
bottom: 0;
right: 0;
left: 0;
} .c3 {
display: inline-block;
background-color: blue;
color: white;
z-index: 9;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
</head>
<body>
<div class="c1">
<input class="c2" type="file" id="file11" name="file1"/>
<a class="c3">上传</a>
</div>
<h3>原生XMLHttpRequest提交</h3>
<input type="button" value="XML提交" onclick="xhrSunbmit();">
<h3>jquery提交</h3>
<input type="button" value="jquery提交" onclick="jqSunbmit();">
<hr/>
<hr/>
<h3>iframe提交</h3>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
{% csrf_token %}
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fileobj" onchange="changeUpalod();" />
{# <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
</form>
<div id="preview"></div>
<script src="/static/jquery.js"></script>
<script src="/static/jquery.cookie.js"></script>
<script> function xhrSunbmit() {
var file_obj = document.getElementById('file11').files[0];
var fd = new FormData();
fd.append('username', 'root');
fd.append('fileobj', file_obj);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload_file/', true);
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
xhr.send(fd);
} function jqSunbmit() {
var file_obj = document.getElementById('file11').files[0];
var fd = new FormData();
fd.append('username', 'root');
fd.append('fafafa', file_obj);
$.ajax({
url: '/upload_file/',
type: 'POST',
headers: {'X-CSRFtoken': $.cookie('csrftoken')},
data: fd,
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);
}
})
}
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();
} /* 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>
</body>
</html>
upload.html
使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化的更多相关文章
- HTML5预览图片、异步上传文件
注意啦:本文的代码都是以JQuery为示例,jq_开头的变量都是jq对象. 在HTML5中,我们可以在图片上传之前对图片进行预览,就像下面这么做 jq_upload_file.change(funct ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- android中解析文件的三种方式
android中解析文件的三种方式 好久没有动手写点东西了,最近在研究android的相关技术,现在就android中解析文件的三种方式做以下总结.其主要有:SAX(Simple API fo ...
- 转 Velocity中加载vm文件的三种方式
Velocity中加载vm文件的三种方式 velocitypropertiespath Velocity中加载vm文件的三种方式: 方式一:加载classpath目录下的vm文件 Prope ...
- Velocity中加载vm文件的三种方式
Velocity中加载vm文件的三种方式: a. 加载classpath目录下的vm文件 /** * 初始化Velocity引擎 * --VelocityEngine是单例模式,线程安全 * @th ...
- 解析Xml文件的三种方式及其特点
解析Xml文件的三种方式 1.Sax解析(simple api for xml) 使用流式处理的方式,它并不记录所读内容的相关信息.它是一种以事件为驱动的XML API,解析速度快,占用内存少.使用 ...
- Ajax上传数据和上传文件（三种方式）
Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...
- Kafka生产者发送消息的三种方式
Kafka是一种分布式的基于发布/订阅的消息系统,它的高吞吐量.灵活的offset是其它消息系统所没有的. Kafka发送消息主要有三种方式: 1.发送并忘记 2.同步发送 3.异步发送+回调函数 下 ...
- 【spring Boot】spring boot获取资源文件的三种方式【两种情况下】
首先声明一点,springboot获取资源文件,需要看是 1>从spring boot默认的application.properties资源文件中获取 2>还是从自定义的资源文件中获取 带 ...
随机推荐
- matlab中句柄@的用法
@是Matlab中的句柄函数的标志符,即间接的函数调用方法. 1 句柄函数 主要有两种语法: handle = @functionname handle = @(arglist)anonymous_f ...
- 字符串处理工具StringUtils
package yqw.java.util; import java.io.File;import java.text.ParseException;import java.text.SimpleDa ...
- mac 下 git log 退出方法
英文状态下按 Q (大小写无论)即可.
- 2019.9.23JAVA动手动脑
1请看以下代码,你发现了有什么特殊之处吗? // MethodOverload.java// Using overloaded methods public class MethodOverload ...
- jodd cache实现缓存超时
public class JoddCache { private static final int CACHE_SIZE = 2; private final static Cache<Obje ...
- Spring Boot教程（十七）属性配置文件详解（2）
通过命令行设置属性值 相信使用过一段时间Spring Boot的用户,一定知道这条命令:java -jar xxx.jar --server.port=8888,通过使用–server.port属性来 ...
- Springboot入门：
Springboot入门: 1.springboot是基于spring的全新框架,设计目的:简化spring应用配置和开发过程. 该框架遵循“约定大于配置”原则,采用特定的方式进行配置,从而事开发者无 ...
- $apply()和$digest()——angular
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- 【ABAP系列】SAP ABAP DYNP_VALUES_UPDATE 更新屏幕字段的函数及用法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP DYNP_VA ...