A, HTML files
will be hidden input tag, with a label instead of landscaping
<form enctype="multipart/form-data" method="post" id="form_upload" action="/xadmin/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>
Two, JS file
# Will be a label binding input tag
$('#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 );
// 弹出上传结果等待对话框
$('#myModal').modal({ keyboard: false })
timer = setInterval(function(){
times += 1
percent = parseInt(100/file_count*times)
div_percent.innerHTML = '请稍后...'+percent+'%'
nanobar.go(percent)
if (times >= file_count){
clearInterval(timer)
div_process.innerHTML = 'Loading...'
div_process.className = 'loading'
}
},200);
}
return true
}
# 关闭上传结果对话框刷新主页面
$('#myModal').on('hide.bs.modal', function () {
location.reload()
})
Third, background
def post(self, request):
if request.method == "POST":
files = request.FILES.getlist("hruser_files") #得到文件对象列表
...