三种ajax上传文件方法
1. XMLHttpRequest(原生ajax)
<input class="file" type="file" id="fafafa" name="fileupload" />
<input type="button" value="提交XHR" onclick="xhrSubmit();"/>
<script type="text/javascript"> function xhrSubmit() {
{# $('#fafafa')[0]注意这儿的写法#}
var file_obj = document.getElementById('fafafa').files[0]; var fd = new FormData();
fd.append('fafafa',file_obj);
xhr = new XMLHttpRequest();
xhr.open('POST', '/upload_file/', true)
xhr.send(fd);
xhr.onreadystatechange = function () {
//后端接受完毕
if(xhr.readyState == 4){
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
}
</script>
2.JQueryAjax
<input type="button" value="jQuery ajax提交" onclick="jqSubmit();"/>
<script type="text/javascript" src="/static/jquery-1.11.1.js"></script> <script type="text/javascript">
function jqSubmit() {
{# $('#fafafa')[0]#}
var file_obj = document.getElementById('fafafa').files[0]; var fd = new FormData();
fd.append('username', 'root')
fd.append('fafafa', file_obj); $.ajax({
url:'/upload_file/',
type:'POST',
data:fd,
processData:false, //tell jQuery not to process the data
contentType: false, //tell jQuery not to set contentType
//这儿的三个参数其实就是XMLHttpRequest里面带的信息。
success:function (arg,a1,a2) {
console.log(arg);
console.log(a1);
console.log(a2);
} })
}
</script>
3.伪ajax(iframe标签,既发送,也接受)
<form action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1"></iframe>
{% csrf_token %}
{# 这儿也可以设置自动提交,就把下面的提交去掉,加一个onchange="changeUpload();#}
<input type="file" name="fafafa"/>
<input type="submit" onclick="iframeSubmit()" name="提交"/>
</form>
<div id="preview"></div> <!-- 处理预览 -->
<script type="text/javascript">
function iframeSubmit() {
{# 等点了submit再加载load方法#}
$('#ifm1').load(function () {
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj);
//处理预览
$('#preview').empty();
var imgTag = document.createElement('img');
{# 注意这儿的路径,得加上"/"#}
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
})
}
</script>
4. python后端处理
fafafa = request.FILES.get('fafafa')
import os
img_path = os.path.join('static/images',fafafa.name)
# 下面这句等于 f = open(str(fafafa),mode='wb),并且添加了清理功能(f.close)。
with open(img_path,'wb') as f:
for item in fafafa.chunks():
f.write(item)
三种ajax上传文件方法的更多相关文章
- django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...
- 三种方式上传文件-Java
前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...
- egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名
egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...
- 闲话ajax,例ajax轮询,ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
- ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...
- models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...
- atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直 ...
- django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件
一.请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的 POST ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
随机推荐
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第14章节--使用Office Services开发应用程序 Excel Services中新功能
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第14章节--使用Office Services开发应用程序 Excel Services中新功能 从S ...
- 使用Logstash来实时同步MySQL数据到ES
上篇讲到了ES和Head插件的环境搭建和配置,也简单模拟了数据作测试 本篇我们来实战从MYSQL里直接同步数据 一.首先下载和你的ES对应的logstash版本,本篇我们使用的都是6.1.1 下载后使 ...
- .NET Core容器化之多容器应用部署@Docker-Compose
1.引言 紧接上篇.NET Core容器化@Docker,这一节我们先来介绍如何使用Nginx来完成.NET Core应用的反向代理,然后再介绍多容器应用的部署问题. 2. Why Need Ngin ...
- idea java 1.5 过时
解决方案: 1.修改maven的setting.xml文件,添加以下内容,此设置为jdk1.8 <profile> <id>jdk-1.8</id> <act ...
- intellij idea的安装步骤---经典
安装IntelliJ IDEA 一.安装JDK 1 下载最新的jdk,这里下的是jdk-8u66 2 将jdk安装到默认的路径C:\Program Files\Java目录下 二.安装IntelliJ ...
- 常见.NET功能代码汇总 (3)
33,彻底关闭Excel进程 .NET中使用Excel属于使用非托管资源,使用完成后一般都要用GC回收资源,但是,调用GC的位置不正确,Excel进程可能无法彻底关闭,如下面的代码: static v ...
- SSH连接工具:SecureCRT设置,另一个SSH连接工具:Xshell。在Windows和Linux之间互传文件可用WinSCP
一般Linux发行版不允许root远程登录,CentOS允许. 调整字体大小:
- std::shared_ptr<void>的工作原理
前戏 先抛出两个问题 如果delete一个指针,但是它真实的类型和指针类型不一样会发生什么? 是谁调用了析构函数? 下面这段代码会发生什么有趣的事情? // delete_diff_type.cpp ...
- Wincc flexable的IO域组态
1.题目 2.新建三个变量 3.组态画面,添加IO域1 1)常规设置 2)属性设置 4.组态IO域2 1)常规项 2)属性设置 5.组态第三个IO域 1)常规设置 2)属性设置 6.此外可以设置动画 ...
- bzoj 4237: 稻草人
Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要 ...