Ajax上传文件并显示进度条

举例说明（主要用到$.ajax的xhr参数执行回调）

xhr	用于创建 XMLHttpRequest 对象的函数。

前端框架：jQuery+Bootstrap+Layer

HTML页面里的表单：

<form class="form-horizontal" id="vform" action=""><div class="form-group"><label class="col-sm-3 control-label">资源名称：</label><div class="col-sm-8"><input name="name" type="text" class="form-control" id="name" /></div></div><div class="form-group"><label class="col-sm-3 control-label">请选择本地资源：</label><div class="col-sm-8"><input name="file" type="file" class="form-control" id="file" /><div class="progress"><div class="progress-bar" id="progress-bar"></div></div></div></div><div class="form-group"><div class="col-sm-4 col-sm-offset-3"><input class="btn btn-primary" id="submit" value="确认上传" /></div></div>
</form>

JavaScript代码：

<script>$("#submit").click(function () {var formData = new FormData(document.getElementById("vform"));$.ajax({type: "POST",url: "@Url.Action("DoAdd")",data: formData,processData: false,contentType: false,error: function (data) {layer.msg('上传失败', {icon: 2,time: 1000 //1秒关闭（如果不配置，默认是3秒）});},success: function (data) {if (data.code == 1) {layer.msg('上传成功', {icon: 1,time: 1000 //1秒关闭（如果不配置，默认是3秒）}, function () {parent.location.reload();});}else {layer.msg(data.msg, {icon: 2,time: 1000 //1秒关闭（如果不配置，默认是3秒）});}},xhr: function () {myXhr = $.ajaxSettings.xhr();if (myXhr.upload) { //检查upload属性是否存在  //绑定progress事件的回调函数  myXhr.upload.addEventListener('progress', progressHandlingFunction, false);}return myXhr; //xhr对象返回给jQuery使用}});});function progressHandlingFunction(event) {var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比$("#progress-bar").html(loaded + "%").css("width", loaded + "%");}
</script>

Ajax上传文件并显示进度条相关推荐

JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
java 上传进度条_Ajax上传文件并显示进度条
第四步:编写前端代码. 1.路径在当前项目的:src\main\resources\asyn.html 上传进度条 align="center"> 0% bordercol ...
使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮和显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...
EXTJS+ASP.NET上传文件带实时进度条代码
一,文件夹二,upLoad.cs是继承IHttpModule的类: usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usin ...
ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条
// ajax + jQuery上传 function UploadFile() { var xhrOnProgress = function(fun) { xhrOnProgress.onprogr ...
flask ajax 上传图片,flask jQuery ajax 上传文件
1.html 代码注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
input type='file' 上传文件时显示文件名及上传进度
https://blog.csdn.net/qq_36687640/article/details/78551217 1.input type='file' 上传文件时显示文件名及上传进度 <i ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...

Ajax上传文件并显示进度条

Ajax上传文件并显示进度条相关推荐

最新文章

热门文章