html5 jquery ajax 檔案上存教學

2019-12-13 00:29:02

html5原生功能非常強大,可以直接實現ajax上存檔案並有進度條顯示,以下案例程式碼可以直接應用到生產專案中.

1

首先整理好必須的元件,ajax我用jquey1.7,非常實用強大,先看上存效果圖

2

先看html標籤,一個是progress,一個span,一個是input

3

我一個個解析關鍵程式碼,先看最下面的html

<progress id="progressBar" value="0" max="100"></progress> 這個是顯示進度條的,value為初始值,當然設定為0了

4

再看<span id="percentage"></span>標籤, 這個標籤作用是顯示進度百分比的

5

點選"選擇檔案"按鈕後,彈出檔案選擇框,選擇後點選"上存"按鈕即可.

6

上存過程效果如圖

7

最後貼出原始碼<!DOCTYPE html><html><head>? ? <title>檔案上存</title>? ? <script src="/static/js/jquery.js"></script>? ? <script>? ? ? ? var xhr_provider = function(){? ? ? ? ? ? var xhr = jQuery.ajaxSettings.xhr();? ? ? ? ? ? if(progressFunction && xhr.upload) {? ? ? ? ? ? ? ? xhr.upload.addEventListener("progress", progr

essFunction, false);? ? ? ? ? ? }? ? ? ? ? ? return xhr;? ? ? ? };? ? ? ? $(function () {? ? ? ? ? ? $("#upload_file").on('click', function () {? ? ? ? ? ? ? ? var data = new FormData();data.append('file', $("#file")[0].files[0]);? ? ? ? ? ? ? ? $.ajax({? ? ? ? ? ? ? ? ? ? data:data,? ? ? ? ? ? ? ? ? ? url: "/upload/",? ? ? ? ? ? ? ? ? ? type: 'post',? ? ? ? ? ? ? ? ? ? contentType: false,? ? ? ? ? ? ? ? ? ? processData: false,? ? ? ? ? ? ? ? ? ? xhr: xhr_provider,? ? ? ? ? ? ? ? ? ? success: function () {? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? error: function () {? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? });? ? ? ? ? ? });? ? ? ? });? ? function progressFunction(evt){? ? ? ? var progressBar = document.getElementById("progressBar");? ? ? ? var percentageDiv = document.getElementById("percentage");? ? ? ? if(evt.lengthComputable){? ? ? ? ? ? progressBar.max = evt.total;? ? ? ? ? ? progressBar.value = evt.loaded;? ? ? ? ? ? $(percentageDiv).html(Math.round(evt.loaded /evt.total * 100) + "%");? ? ? ? }? ? }? ? </script></head><body><div class="container">? ? <progress id="progressBar" value="13" max="100"></progress>? ? <span id="percentage"></span>? ? <input id="file" ?type="file" name="file">? ? <input id="upload_file" class="btn btn-primary" ?type="button" value="上存"></div></body></html>

#upload_file").on('click', function () {? ? ? ? ? ? ? ? var data = new FormData();data.append('file', $("#file")[0].files[0]);? ? ? ? ? ? ? ? $.ajax({? ? ? ? ? ? ? ? ? ? data:data,? ? ? ? ? ? ? ? ? ? url: "/upload/",? ? ? ? ? ? ? ? ? ? type: 'post',? ? ? ? ? ? ? ? ? ? contentType: false,? ? ? ? ? ? ? ? ? ? processData: false,? ? ? ? ? ? ? ? ? ? xhr: xhr_provider,? ? ? ? ? ? ? ? ? ? success: function () {? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? error: function () {? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? });? ? ? ? ? ? });? ? ? ? });? ? function progressFunction(evt){? ? ? ? var progressBar = document.getElementById("progressBar");? ? ? ? var percentageDiv = document.getElementById("percentage");? ? ? ? if(evt.lengthComputable){? ? ? ? ? ? progressBar.max = evt.total;? ? ? ? ? ? progressBar.value = evt.loaded;? ? ? ? ? ? $(percentageDiv).html(Math.round(evt.loaded /evt.total * 100) + "%");? ? ? ? }? ? }? ? </script></head><body><div class="container">? ? <progress id="progressBar" value="13" max="100"></progress>? ? <span id="percentage"></span>? ? <input id="file" ?type="file" name="file">? ? <input id="upload_file" class="btn btn-primary" ?type="button" value="上存"></div></body></html>

html5 jquery ajax 檔案上存教學

1

2

3

4

5

6

7

熱門文章