2. 程式人生 > >web前端js上傳檔案

web前端js上傳檔案

阿新 • • 發佈：2019-01-26
//圖片上傳 var xhr; //上傳檔案方法 function UpladFile() { var fileObj = document.getElementById("file").files[0]; // js 獲取檔案物件 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 = '上傳已取消'; }

相關推薦

web前端js上傳檔案

//圖片上傳 var xhr; //上傳檔案方法 function UpladFile() { var fileObj = document.getElementById("file").files[0]; // js

前端js上傳文件後端C#接收文件

rec anon res owa markdown 接收 post filename ted 本文粗略的講下前端文件上傳和後端文件接收的原理 前端代碼 html <form onsubmit="uploadFile(event)"> <inp

web前端圖片上傳(2)

　　今天發現了一種ajax上傳圖片的方式，是以前沒有用過的，首先來說下為什麼要用這種方式。是因為原來後臺是用的form表單的方式來提交表單資料的。但是覺得呢，這種方式不太好，因為要重新整理頁面，所以我們就改成了ajax的方式，結果後臺老哥說，前端改改就行了，後端不用改。然後我去找到了這種提交表單的方式。廢話不

HTML5新增-----JS-上傳檔案之文字

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>         <

JS 上傳檔案之FormData 與Blob 物件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SA</title> <link rel="style

web前端——實現上傳圖片預覽功能

function previewImage(file) {         var MAXWIDTH = 100;         var MAXHEIGHT = 100;         //var div = document.getElementById('preview');          if

jquery的非同步提交表單（非同步上傳檔案）及jquery.form.js上傳檔案注意事項

方法一：jquery的ajax方式，通過FormaData獲取表單資料 （1）這種方式只需要jquery-1.7.js外掛； （2）通過`jquery中的FormaData類： 自動搜尋表單資訊(表單內沒有name屬性的input不會被搜尋到)，IE<=9

純js上傳檔案

參考文件：http://www.cnblogs.com/tianyuchen/p/5594641.html 參考文件：http://blog.csdn.net/anwenxixi/article/details/48244655 <!DOCTYPE html&

js上傳檔案 java後臺接收檔案

1、前端向後臺傳送檔案的過程其實就是，前端將檔案流傳給後臺，後臺接收檔案流，然後將其寫到後臺伺服器上。處理檔案時，後臺程式只需要讀取伺服器上的檔案即可。 html程式碼： <div class="input-chunk"> <div>輸

js上傳檔案獲取檔案流

上傳檔案獲取檔案流 <div> 上傳檔案 ： <input type="file" name = "file" id = "fileId" /> </div

JS上傳檔案和預覽（單張和多張）

Section1單張上傳和預覽：思路：用<input type="file"/> 觸發onchange事件，取出e.target.files || e.target.dataTransfer.files, 將其轉為window.createObjectURL(fi

js 上傳檔案限制

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascr

js上傳檔案（圖片）限制格式及大小為3M · 觀止

如果你想快速解決這個問題，看本文就夠了。查了好多資料，終於解決了，太耗時間了，本文留給給後來者，希望你們工作的更輕鬆 本文儲存為.html檔案用瀏覽器開啟即可測試功能 <form id="fo

JS 上傳檔案之FormData 與Blob 物件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

js上傳檔案（圖片）限制格式及大小

如果你想快速解決這個問題，看本文就夠了。查了好多資料，終於解決了，太耗時間了，本文留給給後來者，希望你們工作的更輕鬆 本文儲存為.html檔案用瀏覽器開啟即可測試功能 <form id="form1" name="form1" method="post" actio

前端 - jquery方式 / iframe +form 方式 上傳檔案

環境與上一章一樣 jquery 方式上傳檔案: HTML程式碼 {#html程式碼開始#} <input type="file" id="img" > <button onclick="a1()">提交</button> {#

Hbuilder開發app實戰-識歲04-七牛雲上傳檔案的js實現

七牛雲上傳 七牛雲的上傳支援很多種語言，我用過的有java和js，個人感覺都比較方便， 當然java要比js方便一點吧，由於是app中要上傳到七牛雲，所以不可能使用java， 就看拉看七牛雲的js上傳，詳見這裡：http://developer.qiniu.com/docs/v6/api/o

前端上傳檔案前預覽，.net將base64位轉換為圖片並儲存到本地

前端上傳檔案前預覽 <img src="" id="img-change" width="200px" height="200px" id="filePath" name="filePath"> <input type="file" id="file" style="displ

js限制上傳檔案大小

 form表達提交檔案，如果文字過大，就會報413 Request Entity Too Large(請求實體太大)；所以要在頁面就限制文字大小。 HTML : <form id = "adressForm" method="post" enctype="multipart/

js jquery驗證上傳檔案的格式和大小

// 驗證附件格式和大小 function confirmData() { var flag = true; var message = ""; var errorSize = ""; var fileSuffix = $("#fileSuffix").val(