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上传文件方法的更多相关文章

  1. 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 ...

  2. 三种方式上传文件-Java

    前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...

  3. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

  4. 闲话ajax,例ajax轮询,ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  5. ajax上传文件及进度显示

    之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...

  6. models渲染字典&form表单上传文件&ajax上传文件

    {# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...

  7. atitit.ajax上传文件的实现原理 与设计

    atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直 ...

  8. django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件

    一.请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的 POST ...

  9. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

随机推荐

  1. Java集合源代码剖析(二)【HashMap、Hashtable】

    HashMap源代码剖析 ; // 最大容量(必须是2的幂且小于2的30次方.传入容量过大将被这个值替换) static final int MAXIMUM_CAPACITY = 1 << ...

  2. ZOJ ACM 1204 (JAVA)

    毕业好几年了,对算法还是比較有兴趣,所以想又一次開始做ACM题.俺做题比較任意,一般先挑通过率高的题来做. 第1204题,详细描写叙述请參考,ZOJ ACM 1204 1)难度分析 这个题目,基本的难 ...

  3. 数据库管理工具神器-DataGrip,可同时管理多个主流数据库[SQL Server,MySQL,Oracle等]连接

    前言 DataGrip:Jet Brains出品的一款数据库管理工具(没错,是Jet Brains出品,必属精品).DataGrip整合集成了当前主流数据库(如:SQL Server, MySQL, ...

  4. 自学Python2.4-基本数据类型-字典dict(objct)

    Python dict方法总结 一.字典介绍 1.字典概述 ①字典是python中唯一内建的映射类型.又称关联数组或散列②映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关 ...

  5. FastDFS并发会有bug,其实我也不太信?- 一次并发问题的排查经历

    前一段时间,业务部门同事反馈在一次生产服务器升级之后,POS消费上传小票业务偶现异常,上传小票业务有重试机制,有些重试三次也不会成功,他们排查了一下没有找到原因,希望架构部帮忙解决. 公司使用的是Fa ...

  6. 《软件开发者路线图:从学徒到高手》【PDF】下载

    <软件开发者路线图:从学徒到高手>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196346 图书简介 作为一名软件开发者,你在奋力 ...

  7. 将php项目打包docker镜像

    简介:有时候我们需要将php的项目打包成docker镜像,这里介绍下 思路:我们php和apache结合一个镜像实现php项目的访问,mysql是一个单独的镜像 步骤: 1.首先我们在本地测试好自己的 ...

  8. 【HTML5】input元素type属性值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. ES6异步操作Thunk、co和async

    使用Thunk函数对Generator函数进行流程管理,首先什么是Thunk函数?我们应该先说下参数的求值策略,编译器的求值策略一个是"传值调用"另一个是"传名调用&qu ...

  10. jstree 学习

    最近的项目用到了jstree,因为对官方文档理解不充分,所以很多功能都是在网站上搜索再进行使用的.(我只是大自然的搬运工) 对每一级的节点,右键后出现不同的结果. 在jstree中右键是由 conte ...