Django使用ajax实现文件数据上传(excel)

本次主要目标：实现省市工厂联动后，根据省份城市上传数据。

省市联动请观看另一篇博客内容：Django使用ajax实现省市联动

遇到的问题：在提交数据时，我使用的是< input type=“submit” οnclick=“button_1()” value=“上传”/>提交，当选择城市时，不能将城市的id数据传入后端，故而不能将excel表格传入所对应的城市。

问题原因（个人理解）：因为submit提交时提交的是整体表单的数据，页面会刷新，只能获取表单的数据，其他数据不能获取。

解决办法：不使用submit提交按钮提交，用button按钮即可，并使用ajax获取其他的数据。

过程如下：

表单html：

 <div class='col-sm-2'>
        <label>添加数据：</label><br>
		<form action="{% url 'excel_upload' %}" method="post" enctype="multipart/form-data">
        选择文件:<input id="myfile" type="file" name="file1"/><br/>
        <input type="button" onclick="button_1()" value="上传"/>
        </form>
</div>

FormData 接口的append() 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。利用FormData对象,我们可以通过方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

ajax代码：

 function button_1() {
            $('#shangchuan').popover('show')
            var spl = $("#myfile").val().split('\\');


            if (confirm('是否将【' + spl[2] + '】数据上传至【' + $('#c1 option:selected').text() + '省】的【' + $('#c2 option:selected').text() + '】')) {
                {#var name = spl[2]#}

                var formData = new FormData();
                formData.append("myfile", $("#myfile").get(0).files[0]);
                formData.append("pid", $('#c2').val());  #此处获取城市的id
                $.ajax({
                    url: "{% url 'excel_upload' %}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if (data == '上传文件类型错误') {
                            alert("文件上传失败，检查文件是否正确")
                        } else {
                            alert("上传成功")
                        }

                    },
                    error: function (data) {

                        alert("上传失败！");

                    }
                });
            } else {
                alert('检查省份城市是否正确')
            }

        }

上述代码理解：

formData.append("myfile", $("#myfile").get(0).files[0]); 如下理解

用Jquery获取文件，有固定的格式，$ (’#myfile’)就是根据id的名字获取控件，$(’#myfile’)[0]就是取到原生的dom， $(’#myfile’).get(0).files就会取到这个框内的所有文件（有可能是多个文件）， $(’#myfile’)[0].files[0]这个取第0个就是我当前传的文件。

formData.append("pid", $('#c2').val())  #获取城市的id
contentType: false：// 告诉jQuery不要去设置Content-Type请求头
processData: false：// 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false

所对应的视图函数：

def excel_upload(request):
    if request.method == 'POST':
        f = request.FILES.get('myfile')
        city_id = request.POST.get('pid')
        excel_type = f.name.split('.')[1]
        fac_name = f.name.split('.')[0]
        if excel_type in ['xlsx', 'xls']:
            # 开始解析上传的excel表格
            wb = xlrd.open_workbook(filename=None, file_contents=f.read())
            print(wb)
            # table = wb.sheet_by_index(1)
            table = wb.sheet_by_name('监测数据报表')
            # table = wb.sheets()[0]

            rows = table.nrows  # 总行数
            print(table.row_values(2), rows)
            try:
                for i in range(2, rows):
                    rowVlaues = table.row_values(i)
                    city = City.objects.filter(id=city_id).first()
                    Factory.objects.create(city=city, name=fac_name, date=rowVlaues[0], ph=rowVlaues[1]
                                           , cod=rowVlaues[2], nh4=rowVlaues[3], level='')
            except:
               
            return render(request, 'water/predict.html', {'message': '导入成功'})
        else:
           
            return render(request, 'water/predict.html', {'message': '导入失败'})

自此上传文件内容完成。

本在使用Django搭建一个简单的平台时所遇到的问题以及解决方案，整理为笔记方便以后查看修改，上述代码为个人理解，初学者能力有限，如若有问题欢迎指教留言