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

--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"})

猜你喜欢

转载自www.cnblogs.com/Mark-2020/p/13173066.html