亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

1、背景

ajax的表單提交只能提交data數(shù)據(jù)到后臺，沒法實現(xiàn)file文件的上傳還有展示進度功能，這里用到form.js的插件來實現(xiàn)，搭配css樣式簡單易上手，而且高大上，推薦使用。

2、靜態(tài)頁搭建

html代碼如下

<div class="upload-fileWrap">

    <button type="button" id="upload-input-btn" class="lx-btn lx-btn-default-fl">選擇文件</button>

    <form id='myupload' name='myupload' action='' method='post' enctype='multipart/form-data'>

        <input id="upload-input-file" class="upload-input-file" name="file" type="file" accept="audio/mpeg, audio/x-wav" data-value-update="input">

    </form>

    <div class="upload-file-stateWrap">

        <span class="upload-file-result"></span>            

        <div class="progress hidden">

            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">

                <span class="progress-bar-status">0%</span>

            </div>

        </div>

    </div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

需要解釋下我的結構，#upload-input-file的input標簽是真實的文件上傳按鈕，包裹form標簽后可以實現(xiàn)上傳功能，#upload-input-btn的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在.upload-file-result 里面，.progress 是進度條的位置，先讓他隱藏加上hidden 的class，.progress-bar 是進度條的主體，.progress-bar-status 是進度條的文本提醒。

下面添加需要的css

.hidden{display:none;}

.upload-fileWrap {

    margin: 3px 0 0 -2px;

    position: relative;

}

.upload-input-file {

    position: absolute;

    left: 2px;

    top: 0;

    display: inline-block;

    width: 88px;

    height: 34px;

    line-height: 34px;

    opacity: 0;

    cursor: pointer;

    z-index: 2;

}

.upload-file-result {

    color: #a1acc6;

    font-size: 14px;

}

/*進度條*/

.progressWrap {

    position: absolute;

    right: 20px;

    top: 56px;

    width: 200px;

    height: 10px;

}

.progress {

    width: 100%;

    height: 10px;

    background: #0f1529;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

    overflow: hidden;

}

.progress-bar {

    height: 10px;

    background: url("../img/progress-line.png") repeat-x;

}

.progress-bar span {

    position: absolute;

    color: #58637e;

    font-size: 12px;

    line-height: 18px;

}

.progress-bar span.progress-bar-status {

    left: 50%;

    top: -23px;

    margin-left: -15px;

    color: #1cc3b0;

}

.upload-file-stateWrap {

    position: relative;

    width: 100%;

    height: auto;

}

.upload-file-stateWrap .progress {

    width: 60%;

}

.upload-file-stateWrap span.progress-bar-status {

    top: inherit;

    bottom: -3px;

    left: 60%;

    margin-left: 5px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

去掉hidden的class，看到的效果是這樣的 

3、上傳文件腳本

將上傳事件綁定在file的input里面，綁定方式就隨意了。 

var progress = $(".progress-bar"), 

status = $(".progress-bar-status"), 

percentVal = '0%'; 

//上傳步驟 

$("#myupload").ajaxSubmit({ 

url: uploadUrl, 

type: "POST", 

dataType: 'json', 

beforeSend: function () { 

$(".progress").removeClass("hidden"); 

progress.width(percentVal); 

status.html(percentVal); 

}, 

uploadProgress: function (event, position, total, percentComplete) { 

percentVal = percentComplete + '%'; 

progress.width(percentVal); 

status.html(percentVal); 

console.log(percentVal, position, total); 

}, 

success: function (result) { 

percentVal = '100%'; 

progress.width(percentVal); 

status.html(percentVal); 

//獲取上傳文件信息 

uploadFileResult.push(result); 

// console.log(uploadFileResult); 

$(".upload-file-result").html(result.name); 

$("#upload-input-file").val(''); 

}, 

error: function (XMLHttpRequest, textStatus, errorThrown) { 

console.log(errorThrown); 

$(".upload-file-result").empty(); 

} 

});

ajaxSubmit 插件封裝的提交方法；

beforeSend 提交前的回調函數(shù)；

uploadProgress 提交中的回調函數(shù)，position, total, percentComplete是三個返回值，position是已經(jīng)上傳完成的字節(jié)數(shù)，total表示總的字節(jié)數(shù)，percentComplete表示已完成的比例，打印出來如下圖，就是利用這里返回的數(shù)據(jù)制作進度條的 

success 表示上傳成功的回調函數(shù)。 

上傳中和上傳完成的截圖如下：