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>

《jQuery:使用jQuery.form异步上传文件》上有1条评论

发表评论

您的电子邮箱地址不会被公开。

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据