Ajax上传文件同时显示文件上传过程进度条的代码

本篇文章给大家带来的内容是关于Ajax上传文件同时显示文件上传过程进度条的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在学ASP.NET MVC，正好做到文件上传，记录一下。
前端除了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>