利用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)
 
上一篇:Codeforces Gym 101252D&&floyd判圈算法学习笔记


下一篇:CentOS 7 安装 Oracle 11.2.0.4