ajax异步文件上传和进度条

一、ajax异步文件上传

之前有说过在form表单内的文件上传，但是会刷新页面，下面就来实现不刷新页面的异步文件上传

<div class="uploding_div"><input class="up_input" type="file" id="file_test" onchange="change_file_name()"><span class="put_upload" onclick="FileUpload()">上传</span>
</div>

<script>
function FileUpload(){var formData = new FormData();//生成空的form对象formData.append("file",$("#file_test")[0].files[0]);//把该文件对象放入formData$.ajax({url: "{% url 'file_upload' %}",data: formData,type: 'POST',processData:false,contentType:false,success: function(arg){// 当请求执行完成之后，自动调用// arg:服务器返回的数据alert("上传成功");},error: function(){// 当请求错误之后，自动调用}})}
}
</script>

后台views

def file_upload(request):if request.method == "POST":file_obj=request.FILES.get("file") #获取到封装了文件操作的对象new_file_path = "upload/%s/%s"%(request.user.userprofile.id,file_obj.name)f = open(new_file_path,"wb")for line in file_obj.chunks(): #循环取数据f.write(line)   #写入f.close()return HttpResponse("ok")

二、进度条的实现

从Bootstrap找一个进度条

<!--进度条-->
<div class="progress_div"><div class="progress hide"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div></div></div>
<!--进度条-->

<div class="uploding_div"><input class="up_input" type="file" id="file_test" onchange="change_file_name()"><span class="put_upload" onclick="FileUpload()">上传</span>
</div>
<div style="width: 120px"><span class="up_icon">未选择</span>
</div>

<script>
function change_file_name(){$(".up_icon").text("已选择");$(".up_icon").css("color","blue");}//上传文件图片
function FileUpload(){var upload_type = $(".up_input")[0].value;if (upload_type == '') {   //如果等于空console.log("没选择文件")}else {var formData = new FormData();//生成空的form对象formData.append("file",$("#file_test")[0].files[0]);//把该文件对象放入formData$.ajax({url: "{% url 'file_upload' %}",data: formData,type: 'POST',processData:false,contentType:false,success: function(arg){// 当请求执行完成之后，自动调用// arg:服务器返回的数据$(".up_input").val("");$(".up_icon").text("未选择");$(".up_icon").css("color","whitesmoke");},error: function(){// 当请求错误之后，自动调用}});//end ajax$(".progress").removeClass("hide");GetFileUploadProgress($("#file_test")[0].files[0])}
}function GetFileUploadProgress(fileobj){var UploadProgressRefresh = setInterval(function(){$.getJSON("{% url 'file_progress' %}",{filename:fileobj.name},function(callback){console.log(callback);//计算进度条var current_percent = parseInt((callback.recv_size/fileobj.size)*100)+"%";//计算百分比$(".progress-bar").css("width",current_percent);$(".progress-bar").text(current_percent);if (fileobj.size == callback.recv_size){//如果文件的大小等于后台传回的大小，终止定时器clearInterval(UploadProgressRefresh);$(".progress").addClass("hide");alert("上传成功");//清空进度条$(".progress-bar").css("width","0%");$(".progress-bar").text(0);//传完后删除key$.getJSON("{% url 'delete_cache_key' %}",{cache_key:fileobj.name},function(callback){console.log("")})}})},1000);
}</script>js代码

#上传文件
def file_upload(request):if request.method == "POST":file_obj=request.FILES.get("file") #获取到封装了文件操作的对象new_file_path = "upload/%s/%s"%(request.user.userprofile.id,file_obj.name)recv_size = 0f = open(new_file_path,"wb")for line in file_obj.chunks(): #循环取数据f.write(line)   #写入recv_size += len(line)cache.set(file_obj.name,recv_size) #以文件名为key存入缓存f.close()return HttpResponse("ok")#进度条获取大小
def file_progress(request):filename = request.GET.get("filename")progress = cache.get(filename)return HttpResponse(json.dumps({"recv_size":progress}))#传完后删除key
def delete_cache_key(requeat):cache_key = requeat.GET.get("cache_key")cache.delete(cache_key)return HttpResponse("delete cache_key ceccess")views

ajax异步文件上传和进度条相关推荐

nodejs ajax进度条,Ajax异步文件上传与NodeJS express服务端处理的示例分析
Ajax异步文件上传与NodeJS express服务端处理的示例分析发布时间:2021-07-24 11:17:21 来源:亿速云阅读:79 作者:小新这篇文章主要介绍Ajax异步文件上传与N ...
ajax实现上传文件的进度,基于Ajax技术实现文件上传带进度条
1.概述在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条atiUP设计java c# php 1. 设计要求 1 2. 原理and架构 1 3. ui 2 4. spring mvc 2 5. springMVC.xml 3 ...
jquery PHP大文件上传,Jquery和BigFileUpload实现大文件上传及进度条显示
实现方法:用到了高山来客的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, ...
jquery文件上传插件|进度条
jquery文件上传插件|进度条一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...
文件上传带进度条（多种风格）
文件上传带进度条多种风格非常漂亮! 友好的提示以及上传验证! 部分代码: <formid="form1"runat="server">< ...
HTML5结合ajax实现文件上传以及进度显示
基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活, 本来打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制 ...
java html5 上传_HTML5结合ajax实现文件上传以及进度显示
基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活, 本来打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制 ...
文件上传 java 进度条_Java如何实现动态显示文件上传进度条
本文实例实现文件上传的进度显示,我们先看看都有哪些问题我们要解决. 1 上传数据的处理进度跟踪 2 进度数据在用户页面的显示就这么2个问题, 第一个问题,主要是组件的选择必须支持数据处理侦听或通知 ...

ajax异步文件上传和进度条

ajax异步文件上传和进度条相关推荐

最新文章

热门文章