<%@ page language="java" ContentType="text/HTML; charset=UTF-8" pageEnCoding="UTF-8"%><!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd"><HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"><Title>文件上传 原生AJAX上传</Title><style type="text/CSS">.container{ wIDth: 200px; height: 20px; background-color: gray;}#progress{ height: 20px; background-color: orange; display: inline-block;} </style></head><body> <form action="${pageContext.request.contextpath }/upload" enctype="multipart/form-data" method="post"> 上传文件1: <input type="file" name="file1" ID="file"><br /> <div class=‘container‘> <span ID="progress"></span> </div> </form> <br> <button onclick="fileSelected()">文件信息</button><button onclick="uploadfile()">确认上传</button> <div ID="info"> <div ID="filename"></div> <div ID="fileSize"></div> <div ID="fileType"></div> </div> <div ID="result"></div> <script> function fileSelected() { var file = document.getElementByID(‘file‘).files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + ‘MB‘; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ‘KB‘; document.getElementByID(‘filename‘).INNERHTML = ‘name: ‘ + file.name; document.getElementByID(‘fileSize‘).INNERHTML = ‘Size: ‘ + fileSize; document.getElementByID(‘fileType‘).INNERHTML = ‘Type: ‘ + file.type; } } function uploadfile() { var fd = new FormData(); fd.append("file",document.getElementByID(‘file‘).files[0]); var xhr = new XMLhttpRequest(); xhr.upload.addEventListener("progress",uploadProgress,false); xhr.addEventListener("load",uploadComplete,false); xhr.addEventListener("error",uploadFailed,false); xhr.addEventListener("abort",uploadCanceled,false); xhr.open("POST","${pageContext.request.contextpath }/upload");//修改成自己的接口 xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percent = Math.round(evt.loaded * 100 / evt.total); document.getElementByID(‘progress‘).INNERHTML = percent.toFixed(2) + ‘%‘; document.getElementByID(‘progress‘).style.wIDth = percent.toFixed(2) + ‘%‘; } else { document.getElementByID(‘progress‘).INNERHTML = ‘unable to compute‘; } } function uploadComplete(evt) { /* 服务器端返回响应时候触发event事件*/ document.getElementByID(‘result‘).INNERHTML = evt.target.responseText; } function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } </script> </body></HTML>
Jquery AJAX上传带进度条 (bytes进度)
<%@ page language="java" ContentType="text/HTML; charset=UTF-8" pageEnCoding="UTF-8"%><!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd"><HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"><Title>文件上传 jquery上传</Title><script type="text/JavaScript" src="Js/jquery.min.Js"></script><style type="text/CSS">.container{ wIDth: 200px; height: 20px; background-color: gray;}#progress{ height: 20px; background-color: orange; display: inline-block;} </style></head><body> <form action="${pageContext.request.contextpath }/upload" enctype="multipart/form-data" method="post"> 上传文件1: <input type="file" name="file1"><br /> <div class=‘container‘> <span ID="progress"></span> </div> </form> <br> <button onclick="upload()">确认上传</button> <div ID="info"></div> <div ID="result"></div> <script> var totalSize = 0; //绑定所有type=file的元素的onchange事件的处理函数 $(‘:file‘).change(function() { var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了 name = file.name; size = file.size; type = file.type; url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片 totalSize += size; $("#info").HTML("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url); }); function upload() { //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property","value"); var formData = new FormData($(‘form‘)[0]); //AJAX异步上传 $.AJAX({ url: "${pageContext.request.contextpath }/upload",type: "POST",data: formData,xhr: function(){ //获取AJAXSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数 myXhr = $.AJAXSettings.xhr(); if(myXhr.upload){ //检查upload属性是否存在 //绑定progress事件的回调函数 myXhr.upload.addEventListener(‘progress‘,progressHandlingFunction,false); } return myXhr; //xhr对象返回给jquery使用 },success: function(result){ $("#result").HTML(result); },ContentType: false,//必须false才会自动加上正确的Content-Type processData: false //必须false才会避开jquery对 formdata 的默认处理 }); } //上传进度回调函数： function progressHandlingFunction(e) { if (e.lengthComputable) { $(‘#progress‘).attr({value : e.loaded,max : e.total}); //更新数据到进度条 var percent = e.loaded/e.total*100; $(‘#progress‘).HTML(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%"); $(‘#progress‘).CSS(‘wIDth‘,percent.toFixed(2) + "%"); } } </script></body></HTML>
转 : https://www.cnblogs.com/h--d/p/Web.HTML
https://www.cnblogs.com/zhangyongl/p/8312881.HTML
总结以上是内存溢出为你收集整理的web文件上传，带进度条全部内容，希望文章能够帮你解决web文件上传，带进度条所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）