1. XMLHttpRequest(原生ajax)

[](javascript:void(0)

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

使用ajax上传文件的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  3. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  4. 伪ajax上传文件

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

  5. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  6. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

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

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

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

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

  9. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  10. Ajax 上传文件(input file FormData)

    FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...

随机推荐

  1. Java面向对象笔记 • 【第5章 异常处理】

    全部章节   >>>> 本章目录 5.1 异常概述 5.1.1 程序中的异常 5.1.2 异常分类 5.1.3 实践练习 5.2 try-catch处理异常 5.2.2 使用f ...

  2. Ubuntu18.04 + Windows10 双系统安装

    此处忽略Windows10安装!!! 准备 安装环境 OS:Windows10 CPU:Intel(R) Core(TM) i5-10600KF CPU @ 4.10GHz 4.10 GHz GPU: ...

  3. Tcpdump抓包命令使用

    tcpdump命令需要使用root执行 1. 查看网卡命令 ifconfig 2. 监视编址到指定端口的TCP或UDP数据包,那么执行以下命令: tcpdump -i eth0 host 10.43. ...

  4. JMeter_性能压测报错address already in use:connect

    报错截图如下: 原因分析: 这个问题的原因是windows端口被耗尽了(默认1024-5000),而且操作系统要 2~4分钟才会重新释放这些端口,所以可以增加windows的可用端口来解决.windo ...

  5. PowerShell 【Switch篇】

    如果你学过其他的高级语言一定对Switch不陌生,下面讲解一下基本语法. 例1: 1 $n=Get-Random 5 2 $s='小明考试得分' 3 switch($n) 4 { 5 0 {$m=30 ...

  6. js 对 date 和 字符串 类型的正确互换【各浏览器兼容】,解决invalid Date

    1.前言 有个需求,想要把指定日期时间的字符串转换成date类型 pc浏览器正常转换,但手机浏览器 返回结果是 invalid Date [无效的日期] 2.原因 出现这样不兼容的原因其实很简单, p ...

  7. hisql ORM 查询语句使用教程

    HiSql 提供一个可以适合多种数据库的中间查询语法,不需要关注各个数据库的语法特性,通过HiSql写语句可以在常用的不同类型数据库中执行,且语法与Sql语境类似一看就懂一学就会 hisql.net ...

  8. Hive分区表和桶表的使用

    原文链接: https://www.toutiao.com/i6766897068138037763/?group_id=6766897068138037763 我们看官网文档中这个地方 我们先创建好 ...

  9. 使用结构化克隆在 JavaScript 中进行深度复制

    在很长一段时间内,您不得不求助于变通方法和库来创建 JavaScript 值的深层副本.现在js提供 「structuredClone()」 一个用于深度复制的内置函数. 浏览器支持: 浅拷贝 在 J ...

  10. X-Forwarded-for漏洞解析

    首先了解X-Forwarded-for(简称:XFF) X-Forwarded-for:简称XFF,它代表客户端,也就是HTTP的请求真实的IP,只有在通过了HTTP代理或者负载均衡器时才会添加该项. ...