jQuery:使用jQuery.form异步上传文件

是这样的……

最近遇到这样一个问题,在表单提交前,需要把文件传递到服务器,但是这时候问题就来了.表单ID还没有呢(存文档肯定要和表单ID关联啊),于是之前想了一个办法:

在iFrame中,每次上传完文件之后,将文件的信息带回到前台(文件信息不多,基本就是文件名,后台存储文件名,上传人,时间这些.),问题出现在上传了5个文件之后.因为之前一直都是可以直接运行.上传到第5个文件的时候,iFrame页面显示空白,后台没提示报错!!再次尝试,打开F12,看到了URL后面那一长串(预估计超过1000个字符)的参数,竟然每次都是用的GET方式……

上述情况发生后,只能想各种办法,之前大概想到的有如下几个:

  • 后台传回前台的数据,只保留部分重要的;
  • 改用POST方式(这里解释一下:后台传递完文件,需要跳转到list列表页面),但是这个方法完全不行;
  • 提前生成表单ID,这个更不靠谱.

经过了一个周末,终于想到了解决办法:Ajax上传(其实上周是想到过这个方法的,只是当时报错也就没怎么在意了).

异步上传

这个地方去下载:地址.

jQuery LOGO
image-2308

使用如下:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
<script src="/jquery/jquery-1.9.1.min.js"></script>
<script src="/jquery-form/jquery.form-3.51.js"></script>
<style type="text/css">
    .hiddenspan{
        display:none!important;
    }
    </style>
<script type="text/javascript">

$(document).ready(function () {
   
    $("#myFile").change(function () {
        var filepath = $("#myFile").val();
        var extStart = filepath.lastIndexOf(".");
        var ext = filepath.substring(extStart, filepath.length).toUpperCase();
        if (ext == ".EXE" || ext == ".MSI" ){
            alert("不允许上传exe,msi文件格式");
            $("#myFile").val('');
        }else{
            var file_size = 0;
            file_size = this.files[0].size;
            var size = file_size / 1024;
            if (size > 1024*40) {
                alert("上传的图片大小不能超过40M!");
            }
        }
    });
    $("#shownow").click(function(){
        $("#myFile").click();
    })
    $("#choosefilenow").click(function(){
        $("#myFile").click();
    })
    $("#myFile").change(function(){
        var fileurl=$(this).val();
        $("#shownow").val(fileurl);
    })

    $("#operatorNameSelect").change(function(){
        var opv =  $("#operatorNameSelect").val();
        var opvtext = $("#operatorNameSelect").find("option:selected").text();
        if(opv!="请选择"){
        $("#operatorId").val(opv);
        $("#operatorName").val(opvtext);
        }else{
            $("#operatorId").val("");  
            $("#operatorName").val("");
        }
    })

    $("#subm").click(function() {
        if($('#myFile').val()==""){
            alert('请选择上传文件!');
            return false;
        }
            $("#fileupload").ajaxSubmit({
                type: "post",
                url: "xxxxxxxxxxxxx", // 设置你自己的文件上传url
                success: function (data1) {
                        $("#myFile").val("");
                        $("#shownow").val("");
                        alert("文件上传成功");
                        return false;
                },
                error: function (msg) {
                    alert("文件上传失败");
                    return false;
                }
            });
            //return false;
        });
        //$("#fileupload").submit();
});
   
</script>
</head>
<body>
<form id="fileupload" method="post" enctype="multipart/form-data">
    <input type="hidden" id="docinfos" value=''/>
    <div style="width: 80%; float: left; word-wrap: break-word;" class="uploads">
        <input type="file" name="myFile" class="file" id="myFile" size="28" style="display:none"/>
        <input type="button" class="btn btn-sm" value="选择文件" style="float:left" id="choosefilenow">
        <input type="text" name="name"  id="shownow" size="28" style="float:left;height:30px;width:240px;_height:20px;*height:30px;margin-right: 25px;"/>
    </div>
    <div style="width: 20%; float: right; text-align: right; vertical-align: top;" class="uploads">
        <input type="button" id="subm" name="subm"  class="btn btn-primary" value="上传附件">
    </div>
    <div style="clear:both">
        <table id="fileuploadstables" class="table table-condensed table-bordered table-responsive" style="font-size:13px;">
            <tr>
                <th>文件名</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
</form>
</body>
</html>

Java:选择更好的方式

现在去看三年前的问题

有个问题是这样的,统计一年每个月的销售量。看起来很简单,两个数组直接搞定?NO,这次是另外一种方式。

忽然想起刚接触Java的时候,想法就是上面的那样。很简单,粗暴,但是不易扩展,后期完全改不了。很久之后去看半年前写的程序,就会发现很多不认识。最近这种感觉太深切了,所以在一开始的时候,就想好怎么去做,怎么去完成。

好吧。上面都是废话。

最近一直在准备SSL的事情,但是很可惜,失败了。因为,因为,引用的站外资源太多了!!!

java标志
image-2306

问题总要解决

1
注意:最小Jdk版本为1.8

这是一个实体,定义了月份和金额,重写了toString()方法:

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
class Sales {

public Month getMonth() {
    return month;
}

public void setMonth(Month month) {
    this.month = month;
}

private Month month;

public double getSales() {
    return sales;
}

public void setSales(double sales) {
    this.sales = sales;
}

private double sales;

@Override
public String toString() {
    return "month->" + getMonth() + ",sales->" + getSales();
}
}

下面是计算的部分,主要使用了Java 1.8里面stream的概念,这个东西特别方便,主要是方便在哪方面呢?主要在可以把集合都转换成stream(流)然后进行各项操作。

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
  * @author puruidong
  * @version 2015-07-10
  */
public class Main {
private static final double monthlySales[] = new double[12];
private static final String[] monthArray = {"January", "February", "March", "April", "May",
        "June", "July", "August", "September", "October",
        "November", "December"};


private Set<Sales> salesList = new HashSet<Sales>(12);


public void totalSales() {

    double count = salesList.stream().mapToDouble(new ToDoubleFunction<Sales>() {
        @Override
        public double applyAsDouble(Sales value) {
            return value.getSales();
        }
    }).sum();//通过stream的方式进行总和计算.
    System.out.println("total->" + count);
}

static void averageSales() {

}

static void highestMonth() {

}

static void lowestMonth() {

}

public void showSales() {
    salesList.forEach((x) -> {
        System.out.println(x.toString());
    });


}

public void getSalesUsingNonStaticMethodWhichBelongsToInstanceAndRecommended(Scanner sc) {
    int i = 0;
    while (i <= 11) {
        System.out.println("Please enter a month to be recorded?(1-12)");
        int months = sc.nextInt();
        Sales sales = new Sales();
        switch (Month.of(months)) {//Month是Java 1.8中新增的枚举类.
            case JANUARY:
                sales.setMonth(Month.JANUARY);
                break;
            case FEBRUARY:
                sales.setMonth(Month.FEBRUARY);
                break;
            case MARCH:
                sales.setMonth(Month.MARCH);
                break;
            case APRIL:
                sales.setMonth(Month.APRIL);
                break;
            case MAY:
                sales.setMonth(Month.MAY);
                break;
            case JUNE:
                sales.setMonth(Month.JUNE);
                break;
            case JULY:
                sales.setMonth(Month.JUNE);
                break;
            case AUGUST:
                sales.setMonth(Month.AUGUST);
                break;
            case SEPTEMBER:
                sales.setMonth(Month.SEPTEMBER);
                break;
            case OCTOBER:
                sales.setMonth(Month.OCTOBER);
                break;
            case NOVEMBER:
                sales.setMonth(Month.NOVEMBER);
                break;
            case DECEMBER:
                sales.setMonth(Month.DECEMBER);
                break;
            default:
                System.err.println("--input error--");
                break;
        }
        if (sales.getMonth() != null) {
            sc.reset();
            System.out.println("Please enter turnover:");
            double turnover = sc.nextDouble();
            sales.setSales(turnover);
            salesList.add(sales);
        }
        i++;
    }
    showSales();
    System.out.println("----------------------------");
    totalSales();


}

public static void main(String[] args) {
    Scanner input = new Scanner(System.in);
    Main salesTracking = new Main();
    salesTracking.getSalesUsingNonStaticMethodWhichBelongsToInstanceAndRecommended(input);
}//end main

}//end class

看到这,快去更新Java 1.8吧.

此文成形于对一位网友的回复,原帖在此.