js 实现上传文件

今天药忘吃喽~ 2022-02-02 01:43 286阅读 0赞

**参考一：**

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title>  
    <style>  
        \#progress\{  
            height:10px;  
            width:500px;  
            border: 1px solid gold;  
            position: relative;  
            border-radius: 5px;  
        \}  
        \#progress .progress-item\{  
            height:100%;  
            position: absolute;  
            left:0;  
            top:0;  
            background: chartreuse;  
            border-radius: 5px;  
            transition: width .3s linear;  
        \}  
    </style>  
</head>  
<body>  
文件上传框<br>  
<input type="file" id="file"><br>  
显示进度条<br>  
<div id="progress">  
    <div class="progress-item"></div>  
</div>  
上传成功后的返回内容<br>  
<span id="callback"></span>  
</body>  
<script>  
    //首先监听input框的变动，选中一个新的文件会触发change事件  
    document.querySelector("\#file").addEventListener("change",function () \{  
        //获取到选中的文件  
        var file = document.querySelector("\#file").files\[0\];  
        //创建formdata对象  
        var formdata = new FormData();  
        formdata.append("file",file);  
        //创建xhr，使用ajax进行文件上传  
        var xhr = new XMLHttpRequest();  
        xhr.open("post","/");  
        //回调  
        xhr.onreadystatechange = function () \{  
            if (xhr.readyState==4 && xhr.status==200)\{  
                document.querySelector("\#callback").innerText = xhr.responseText;  
            \}  
        \}  
        //获取上传的进度  
        xhr.upload.onprogress = function (event) \{  
            if(event.lengthComputable)\{  
                var percent = event.loaded/event.total \*100;  
                document.querySelector("\#progress .progress-item").style.width = percent+"%";  
            \}  
        \}  
        //将formdata上传  
        xhr.send(formdata);  
    \});  
</script>  
</html>

**参考二：**

<!DOCTYPE html>

<html>

<head>

<title>XMLHttpRequest上传文件</title>

//图片上传

var xhr;

//上传文件方法

function UpladFile() \{

var fileObj = document.getElementById("file").files\[0\]; // js 获取文件对象

// CFF 上传的接口失败了。为啥？！

var url = "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址

var form = new FormData(); // FormData 对象

form.append("file", fileObj); // 文件对象

xhr = new XMLHttpRequest(); // XMLHttpRequest 对象

xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。

xhr.onload = uploadComplete; //请求完成

xhr.onerror = uploadFailed; //请求失败

xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】

xhr.upload.onloadstart = function()\{//上传开始执行方法

ot = new Date().getTime(); //设置上传开始时间

oloaded = 0;//设置上传开始时，以上传的文件大小为0

\};

xhr.send(form); //开始上传，发送form数据

//上传成功响应

function uploadComplete(evt) \{

//服务断接收完文件返回的结果

var data = JSON.parse(evt.target.responseText);

if(data.success) \{

alert("上传成功！");

\}else\{

alert("上传失败！");

//上传失败

function uploadFailed(evt) \{

alert("上传失败！");

//取消上传

function cancleUploadFile()\{

xhr.abort();

//上传进度实现方法，上传过程中会频繁调用该方法

function progressFunction(evt) \{

var progressBar = document.getElementById("progressBar");

var percentageDiv = document.getElementById("percentage");

// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0

if (evt.lengthComputable) \{//

progressBar.max = evt.total;

progressBar.value = evt.loaded;

percentageDiv.innerHTML = Math.round(evt.loaded / evt.total \* 100) + "%";

var time = document.getElementById("time");

var nt = new Date().getTime();//获取当前时间

var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s

ot = new Date().getTime(); //重新赋值时间，用于下次计算

var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b

oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

//上传速度计算

var speed = perload/pertime;//单位b/s

var bspeed = speed;

var units = 'b/s';//单位名称

if(speed/1024>1)\{

speed = speed/1024;

units = 'k/s';

if(speed/1024>1)\{

speed = speed/1024;

units = 'M/s';

speed = speed.toFixed(1);

//剩余时间

var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);

time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';

if(bspeed==0) time.innerHTML = '上传已取消';

</script>

</head>

<body>

</body>

</html>

**参考三：**

<!DOCTYPE html>

<html>

<head>

<title>XMLHttpRequest上传文件</title>

function uploadPic() \{

var form = document.getElementById('upload'),

formData = new FormData(form);

$.ajax(\{

url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload",

type:"post",

data:formData,

processData:false,

contentType:false,

success:function(res)\{

if(res)\{

alert("上传成功！");

console.log(res);

$("\#pic").val("");

$(".showUrl").html(res);

$(".showPic").attr("src",res);

\},

error:function(err)\{

alert("网络连接失败,稍后重试",err);

\})

\};

</script>

</head>

<body>

</form>

</body>

</html>

阮一峰 文件上传：

[https://www.liaoxuefeng.com/wiki/1022910821149312/1023022494381696][https_www.liaoxuefeng.com_wiki_1022910821149312_1023022494381696]

[https_www.liaoxuefeng.com_wiki_1022910821149312_1023022494381696]: https://www.liaoxuefeng.com/wiki/1022910821149312/1023022494381696

js 实现上传文件

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ajaxfileupload.js实现文件异步上传

相关七牛上传文件（JS实现）

相关七牛上传文件（JS实现）

相关 Servlet实现文件上传，可多文件上传

相关 [js]文件上传

相关 Node.js-文件上传

相关 js 实现上传文件

相关 js - 使用input标签实现上传文件夹和上传文件

相关 js上传文件；input上传文件；

相关 js input文件上传