1、利用FormData实现文件上传
<input type="file" id="avatar" name="avatar">
<button type="button">保存</button>
$('button').click(function(){
var files = $('#avatar').prop('files');
var data = new FormData();
data.append('avatar', files[0]);
$.ajax({
url: '/api/upload',
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false
});
});
2、放在form表单里
需要引入jquery.form.js文件
<form enctype="multipart/form-data" method="post" id="form_upload"
accept="application/msexcel,application/msword,application/pdf,text/html">
{% csrf_token %}
<a href="#" id="a_upload" class="btn btn-primary" ><i class="glyphicon glyphicon-arrow-up"></i>上传 简历</a>
<input id="input_upload" type="file" name="hruser_files" style="display:none" onchange="upload_file()" multiple="multiple"/>
# onchange="upload_file()"表示选择文件后不需要再点击确认上传就能自动上传了
</form>
# 将a标签绑定input标签
$('#a_upload').click(function(){
$('#input_upload').click()
})
function upload_file() {
$('#form_upload').ajaxSubmit({
beforeSubmit: validate,
type: 'post',
url : "/",
clearForm: true,
success: function(data) {
if(data.extra=="0"){# 上传成功,展示上传结果
var result = upload_result(data)
$('#id_modal-body').html(result)
clearInterval(timer)
}
else{
alert(data.msg)
}
}
});
return false; // 阻止表单自动提交事件
}
function validate(formData, jqForm, options) {
var file_count = formData.length - 1
var percent = 0
var times = 0
var div_percent = document.getElementById('upload_percent')
var div_process = document.getElementById('upload_process')
if(file_count==1 && formData[1].value == ''){
alert('请添加文件');
return false;
}
else if(file_count>50){
alert('文件数量超过最大数量限制(50)');
return false;
}
else{
var options = {bg: '#00FFFF', target: div_process,};
var nanobar = new Nanobar( options );