이 문서의 내용은 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>
관련 권장 사항:
작은 이미지를 클릭하여 큰 이미지를 표시하는 효과를 얻기 위해 js는 어떻게 작동합니까? 영상? (코드 예)
위 내용은 Ajax 파일 업로드 및 파일 업로드 프로세스의 진행률 표시줄 표시를 위한 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!