html表单上传增加进度条,Jquery.form.js实现表单异步提交以及文件上传（带进度条）...

jquery.form.js是一个非常强大的用于表单提交的插件。

通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。

Jquery官网下载网址

github地址+使用文档

网上参考文档

先放上结果图吧，吊吊大家胃口(动图哦)

下面贴出代码，注释挺详细的，不再做过多解释了。

前端页面:

File Upload Progress Demo

body { padding: 30px }

form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }

.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }

.percent { position:absolute; display:inline-block; top:3px; left:48%; }

0%

$(function(){

var bar = $('.bar');

var percent = $('.percent');

var status = $('#status');

$('form').ajaxForm({

beforeSerialize:function(){

//alert("表单数据序列化前执行的操作！");

//$("#txt2").val("java");//如：改变元素的值

},

beforeSubmit:function(){

//alert("表单提交前的操作");

var filesize = $("input[type='file']")[0].files[0].size/1024/1024;

if(filesize > 50){

alert("文件大小超过限制，最多50M");

return false;

}

//if($("#txt1").val()==""){return false;}//如：验证表单数据是否为空

},

beforeSend: function() {

status.empty();

var percentVal = '0%';

bar.width(percentVal)

percent.html(percentVal);

},

uploadProgress: function(event, position, total, percentComplete) {//上传的过程

//position 已上传了多少

//total 总大小

//已上传的百分数

var percentVal = percentComplete + '%';

bar.width(percentVal)

percent.html(percentVal);

//console.log(percentVal, position, total);

},

success: function(data) {//成功

var percentVal = '100%';

bar.width(percentVal)

percent.html(percentVal);

alert(data);

},

error:function(err){//失败

alert("表单提交异常！"+err.msg);

},

complete: function(xhr) {//完成

status.html(xhr.responseText);

}

});

});

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

69

70

71

72

73

74

75

76

77

78

79

80

upload.php

if (!empty($_FILES['myfile'])) {//判断上传内容是否为空

if ($_FILES['myfile']['error'] > 0) {//判断上传错误信息

echo "上传错误：";

switch ($_FILES['myfile']['error']) {

case 1:

echo "上传文件大小超出配置文件规定值";

break;

case 2:

echo "上传文件大小超出表单中的约定值";

break;

case 3:

echo "上传文件不全";

break;

case 4:

echo "没有上传文件";

break;

}

} else {

list($maintype, $subtype) = explode("/", $_FILES['myfile']['type']);

if (/*$maintype != "image" || $subtype != "png"*/false) {//如果要限制文件格式，就去掉注释

echo "上传文件格式不正确";

} else {

if (!is_dir("./upfile")) {//判断指定目录是否存在

mkdir("./upfile");//创建目录

}

$path = './upfile/' . time() . strtolower(strstr($_FILES['myfile']['name'], "."));//定义上传文件名和存储位置

if (is_uploaded_file($_FILES['myfile']['tmp_name'])) {//判断文件上传是否为HTTP POST上传

if (!move_uploaded_file($_FILES['myfile']['tmp_name'],$path)) {//执行上传操作

echo "上传失败";

} else {

echo "文件:" . time() . strtolower(strstr($_FILES['myfile']['name'], ".")) . "上传成功，大小为：" . $_FILES['myfile']['size'] . "字节";

}

} else {

echo "上传文件：".$_FILES['myfile']['name']."不合法";

}

}

}

}

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

对上面上传代码有疑问的童鞋们可以看我的另外两篇文章，解释的很详细。

本文仅代表作者个人观点，不代表SEO研究协会网官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱cxb5918@163.com。更多相关资讯，请到SEO研究协会网www.seoxiehui.cn学习互联网营销技术请到巨推学院www.jutuiedu.com。