input label beautification

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") #得到文件对象列表
       ...

Guess you like

Origin blog.csdn.net/bocai_xiaodaidai/article/details/90768591