利用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"组中 ...
随机推荐
- 同一台电脑配置多个JBoss
在jboss中找到对应的文件,修改对应文件端口可解决两个以上jboss的端口冲突问题 不同的jboss修改的端口要区别开来,本例所用jboss版本为JBoss4.2.2.GA 文件端口: 8083,1 ...
- sum(case when ct.tradeTotal >= 0 then 1 else 0 end)的意思
String hql = "select new com.ks.admin.report.dto.ReportMonthWithDrawalDto(" + "count( ...
- 工控随笔_11_西门子_WinCC的VBS脚本_02_运算符
VBS脚本做为编程语言,提供了很多的运算符,通过这些运算符,可以实现不同的操作.运算符具有不同的类型 不同的运算符之间具有运算优先级. 一.运算符的分类 大体分为以下几类: 1.赋值运算符 2.算术运 ...
- Browser Page Parsing Details
Browser Work: 1.输入网址. 2.浏览器查找域名的IP地址. 3. 浏览器给web服务器发送一个HTTP请求 4. 网站服务的永久重定向响应 5. 浏览器跟踪重定向地址 现在,浏 ...
- 存储过程中调用webservice
存储过程中调用webservice其实是在数据库中利用系统函数调用OLE. 1.查找webservice api 可得到MSSOAP.SoapClient. 2.查找API 接口可得到mssoapin ...
- linux杂记
find [path] -name fileName find /home/audio/mrcp-asr/audio -type f -newermt '2019-04-23 00:00' ! -ne ...
- 在Windows2008下安装SQL Server 2005无法启动服务的解决办法
在Windows2012下安装SQL Server 2005无法启动服务的解决办法 1.正常安装任一版本的SQL Server 2005. 2.安装到SqlServer服务的时候提示启动服务失败 此 ...
- Pycharm去掉项目所有 # 注释
通过快捷键ctrl+shift+R 进入 项目全局替换窗口,点击右上角 勾选正则,然后 搜索框输入 (#.*) 即可 ,然后点击 replace all 去掉所有注释
- 基于kettle的简单HTTP接口监控
需求:监控系统中使用的所有http接口,要求简单,易用. 一般的思路也就是发送get/post请求,然后检查接口的响应结果. 如果写代码,要处理http请求,检查http响应,实现发邮件,写d ...
- centos7 lnmp环境部署
搭建版本 版本组合 php5.6+apache/2.4.6(centos7)+mysql5.7.24 因为新系统不能确认哪些指令已经搭建 所以安装前需要确认下是否拥有 检测是否已经安装过Vim rp ...