前端：用jQuery实现文件上传的两种方法

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 );