Django通过Ajax利用FormData动态提交表单（包括文件，字符串）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38003892/article/details/81355121

0 需求背景

有的时候我们上传表单，经过后台处理之后再分发回原来页面，这时必定会刷新这个页面。为了解决这个问题，我们采用JS动态提交表单元素，如：file、text等类型，可以很好的解决这一问题。
1 DOM结构

<form method="post" enctype="multipart/form-data"">
	<input id="subject" type="text" class="form-control" >
	<input id="excels"  type="file">
	<select class="form-control" id="models">
		<option>model0</option>
		<option>model1</option>
	</select>
	<input id="con" type="file">
	<input type="button" id="showyulan" value="上传">
</form>

2 JS代码

$('#showyulan').click(function () {
        var formData = new FormData();
        formData.append('subject', $('#subject').val())
        formData.append('excels', document.getElementById("excels").files[0])
        formData.append('models', $('#models').val())
        formData.append('con', document.getElementById("con").files[0])
        formData.append('qunfasum', $('#qunfasum').val())
        formData.append('jiange', $('#jiange').val())
        formData.append('yuming', $('#yuming').val())
        formData.append('duankou', $('#duankou').val())

        $.ajax({
                url:"/showyulan/",
                type:"POST",
                data:formData,
                processData:false,
                contentType:false,
                success: function (data) {
                    alert(data)
                }
        })
    })

3 Django后台代码

def showyulan(request):
    subject = request.POST.get('subject')

    f1 = request.FILES.get('excels')
    
    # 文件保存路径
    fname = '%s/excel/%s' % (settings.MEDIA_ROOT, f1.name)
    with open(fname, 'wb') as pic:
        for c in f1.chunks():
            pic.write(c)

    models = request.POST.get('models')

    f2 = request.FILES.get('con')
    
    # 文件保存路径
    fname = '%s/text/%s' % (settings.MEDIA_ROOT, f2.name)
    with open(fname, 'wb') as pic:
        for c in f2.chunks():
            pic.write(c)
            
    return HttpResponse('上传成功！')