页面通过ajax实现文件上传功能

ajax上传文件

html代码

--html代码
{{csrf_token}}
<input type="file" name="fileName1" id="fileName1"/>
<input type="button" onclick="sendToUser()" id="sendToUser" value="提交" />
--js代码
<script>
	function sendToUser(){ //在这里进行ajax 文件上传 用户的信息 
			var $file1 = $("input[name='fileName1']").val();//用户文件内容(文件)
			// 判断文件是否为空 
			if ($file1 == "") {
				alert("请选择上传的目标文件! ")
				return false;
			}
			//判断文件类型,我这里根据业务需求判断的是Excel文件
			var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase();
			if(fileName1 != "xls" && fileName1 !="xlsx"){
              	alert("请选择Execl文件!");				
				return false;
			}
			//判断文件大小
			var size1 = $("input[name='fileName1']")[0].files[0].size;
			if (size1>104857600) {
				alert("上传文件不能大于100M!");
				return false;				
			}
			boo1 = true;
		var type = "file";
		var formData = new FormData();//这里需要实例化一个FormData来进行文件上传
		formData.append(type,$("#fileName1")[0].files[0]);
        formData.append("csrfmiddlewaretoken", "{{ csrf_token }}");
		$.ajax({
			type : "post",
			url : "uploadToFile",
			data : formData,
			processData : false,
			contentType : false,
			success : function(data){
				if (data=="error") {
					alert("文件提交失败!");
				}else{
				$("input[name='userUrl']").val(data);
				alert("文件上传成功!");
			}}
		});
		}
</script>

视图函数

--视图函数
def ajaxupload(request):
    if request.method == 'POST':
        image_obj = request.FILES.get('file')
        print(image_obj)
        with open(image_obj.name, 'wb') as f:
            fro line in image_obj.chunks():
                f.write(line)
    return render(request,{"data":"ok"})