最近在学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>
相关推荐：
js实现gzip解压缩的代码实现
js如何操作来实现点击小图展示出大图的效果？（代码示例）
以上就是ajax上传文件同时显示文件上传过程进度条的代码的详细内容。