利用ajax与input 上传与下载文件
html 部分代码
<form action="" method="" class="form form-horizontal" novalidate>
<div class="form-group">
<label for="avatar" class="text-center" id="route">
点此选择文件<span id="files"></span>
</label>
<div class="">
<input type="file" id="avatar">
</div>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" id="upload_btn" value="上传文件">
</div>
</form>
script 脚本 <script>
// 选择文件 change: 发生改变并失去焦点之后 这段代码似乎没啥用,但在上传图片文件时就用到了
$('#avatar').change(function () {
{#将js转化为jq#}
file = this.files[0];
{#console.log(file);#}
// 将file解析为blob
reader = new FileReader();
reader.readAsText(file); //读取文本内容
reader.readAsDataURL(file); //上传图片, 然后在下面利用attr,将src的值变为reader.result
reader.onload = function () { $('#files').text(reader.result);
console.log($('#files').text(reader.result));
}
}); $('#upload_btn').click(function () {
token = $('[name = csrfmiddlewaretoken]').val();
{#console.log($('#avatar')[0].files[0].name); {# 文件名 # }#}
{#console.log($('#avatar')[0].files[0].size); {# 文件大小 # }#}
{#console.log($('#avatar').val()); {# 文件路径 # }#}
key_value = $('.form').serializeArray();
form_data = new FormData();
avatar = $('#avatar')[0].files[0];
console.log(avatar);
if(avatar){
form_data.append('avatar', avatar)
}
form_data.append('csrfmiddlewaretoken', token);
form_data.append('filename', avatar.name);
form_data.append('filesize', avatar.size);
$.ajax({
url: '/upload/',
type: 'post',
data: form_data,
contentType: false,
processData: false,
success: function (data) {
if (data.state == 0) {
location.reload()
}
}
})
})
</script> <script>
function download_action(data, id) {
$('#myModal').modal('show');
$('#download-sure').click(function () {
{#let id = id;#}
let url = data;
$.ajax({
url: '/' + url + '/' + id + '/',
type: 'get',
success: function (data) {
location.reload();
{# 刷新页面 #}
}
})
$('#myModal').modal('hide');
})
}
</script>
后台 要使用 request.FILES 来获取文件内容
avatar = request.FILES.get('avatar', None)
利用ajax与input 上传与下载文件的更多相关文章
- winform 利用Http向服务器上传与下载文件
利用在服务器端的IIS,布置“请求处理映射”.从而处理,本地发出Post请求.Url指向web网站所在路径的请求映射.由映射代码实现服务器保存文件. winform里面使用,WebClient的对象, ...
- 利用SecureCRT上传、下载文件(使用sz与rz命令),超实用!
利用SecureCRT上传.下载文件(使用sz与rz命令),超实用! 文章来源:http://blog.csdn.net/dongqinliuzi/article/details/39623169 借 ...
- ajax无刷新上传和下载
关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...
- ftp上传或下载文件工具类
FtpTransferUtil.java工具类,向ftp上传或下载文件: package utils; import java.io.File; import java.io.FileOutputSt ...
- SecureCRT上传和下载文件
SecureCRT上传和下载文件(下载默认目录) SecureCR 下的文件传输协议有ASCII .Xmodem .Ymodem .Zmodem ASCII:这是最快的传输协议,但只能传送文本文件. ...
- 11、只允许在主目录下上传和下载文件,不允许用putty登录
创建用户xiao, 使其只允许在用户主目录 (/var/www/html)下上传和下载文件,不允许用putty登录 (为了安全起见,不给过多的权限) 1.创建xiao用户 [root@localh ...
- 每天一个linux命令(26):用SecureCRT来上传和下载文件
用SSH管理linux服务器时经常需要远程与本地之间交互文件.而直接用SecureCRT自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmodem. ...
- Linux--用SecureCRT来上传和下载文件
SecureCRT下的文件传输协议有以下几种:ASCII.Xmodem.Ymodem.Zmodem ASCII:这是最快的传输协议,但只能传送文本文件. Xmodem:这种古老的传输协议速度较慢,但由 ...
- secureCRT简单上传、下载文件记录
secureCRT简单上传.下载文件记录: 1)sz下载 -y 覆盖 2)rz上传 -y 覆盖 3)以上两个命令属于安装时包含在“Dial-up Networking Support"组中 ...
随机推荐
- python中使用 C 类型的数组以及ctypes 的用法
Python 在 ctypes 中为我们提供了类似C语言的数据类型, 它的用途(我理解的)可能是: (1) 与 其他语言(如 C.Delphi 等)写的动态连接库DLL 进行交换数据,因为 pytho ...
- .NET MVC 表主外键关系 JSON 无限循环 方案二(推荐)
public class JsonResultObject:JsonResult { private Newtonsoft.Json.JsonSerializerSettings Settings { ...
- php7 pdo抽象类操作数据库
查询 <?php try { $dbconnect = new PDO('mysql:host=localhost;dbname=pdodatabase','root','753951'); } ...
- Tree命令使用
Tree命令使用 格式:tree + 参数 tree命令行参数: -a 显示所有文件和目录. -A 使用ASNI绘图字符显示树状图而非以ASCII字符组合. -C 在文件和目录清单加上色彩,便于区分各 ...
- Android Studio 问题
1.问题:android studio 安装 apk 闪退 方法: Build → Clean Project 一下再安装 2.问题:Gradle failed: already disposed m ...
- windows 8.1 启用hyper-v导致vmware 无法使用的问题解决方案(兼顾WP8.1模拟器和vmware)
最近搭建了windows phone 8.1开发环境,为了开机就可以进行WP8.1开发,就使用了 bcdedit /set {BCD ID} hypervisorlaunchtype auto 命令将 ...
- 升级GCC以支持C++11
本文主要介绍在Linux系统下,如何升级GCC以支持C++11.目前来看GCC是对C++11支持程度最高最多的编译器,但需要GCC4.8及以上版本. 本文使用操作系统:Centos 6.4 Desk ...
- iOS安全系列之一:HTTPS
如何打造一个安全的App?这是每一个移动开发者必须面对的问题.在移动App开发领域,开发工程师对于安全方面的考虑普遍比较欠缺,而由于iOS平台的封闭性,遭遇到的安全问题相比于Android来说要少得多 ...
- 部分视图 - partial
对于partia来说,可以理解为组件化的运用,即将对应的html/js/css进行封装,然后通过模板引擎直接进行调用 1.partial的注册 //可以直接写在app.js,也可以写在之前所说的hel ...
- 从内部入手,浅谈malloc和new的区别
想要理解一样事物,就要先用自己的语言去描述一件事物.在我查阅资料后,发现malloc函数简单说来就是空闲内存空间收集器,并把空闲空间关联起来,用术语来说就是:将空闲内存块合并起来并称为"闲置 ...