每日归档： 2016年7月21日

jQuery:对上传文件进行操作

得来..

其实是从昨天的问题引申而来,因为昨天的例子只判断了文件选择是否为空.在当前网络环境下,这显然是不行的…于是今天对代码进行了整理.增加了[文件大小]、[文件后缀]的判断.

对于JavaScript的File的操作,可以参考:地址

html

源码

注意:如果在页面中直接引入iframe,必须给其css设置height属性,否则将影响后面内容的展示.iframe标签不能简写:错误的[<iframe />]!正确写法:[<iframe>lt;/iframe>]

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
/*
                *:此处必须使用live进行事件绑定.
                    因为在118行中,使用了[fileinput.remove();]对元素进行删除.

             */
             $("#file").live("change",function () {        
                  if($.trim($(this).val())==''){//为空的时候不要继续判断.
                         return false;
                   }
                    var filepath = $(this).val();
                    var extStart = filepath.lastIndexOf(".");
                    var fileExt = filepath.substring(extStart, filepath.length).toUpperCase();
                    if ((fileExt != ".BMP" &amp;&amp; fileExt != ".PNG" &amp;&amp; fileExt != ".fileExt" &amp;&amp; fileExt!= ".JPG" &amp;&amp; fileExt != ".JPEG") &amp;&amp; ((fileExt != ".PDF" &amp;&amp; fileExt != ".DOC" &amp;&amp; fileExt != ".DOCX"))) {
                        top.layer.msg("图片限于bmp,png,gif,jpeg,jpg格式，文档仅限于pdf,Word文档格式");
                        $("#upload").prop("disabled",true);
                    }else{
                        var file_size = 0;
                        if ($.browser.msie) {
                            var img = new Image();
                            img.src = filepath;
                            if (img.fileSize &gt; 0) {
                                 if (img.fileSize &gt; 10240) {
                                    top.layer.msg('文件大小不能超过10M,请重新选择!');
                                    $("#upload").prop("disabled",true);
                                 }else{
                                     top.layer.msg("文件大小符合要求!");
                                    $("#upload").prop("disabled",false);
                                 }
                            }
                        } else {
                            file_size = this.files[0].size;
                            var size = file_size / 1024;
                            if (size &gt; 10240) {
                                top.layer.msg("文件大小不能超过10M,请重新选择!");
                                $("#upload").prop("disabled",true);
                            }else{
                                if($("#upload").prop("disabled")){
                                    top.layer.msg("文件符合要求!");
                                }
                                $("#upload").prop("disabled",false);
                            }
                        }
                    }
            });

下面是完整文件,上面一部分则是单独判断的函数:

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
&lt;%@ page contentType="text/html;charset=UTF-8" %&gt;
&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&gt;
&lt;%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;文件上传&lt;/title&gt;
    &lt;meta name="decorator" content="default"/&gt;
    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/jquery/jquery.form.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/layer/layer.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    &lt;c:if test="${empty list }"&gt;
        $(document).ready(function() {
           
            /*
                *:此处必须使用live进行事件绑定.
                    因为在118行中,使用了[fileinput.remove();]对元素进行删除.

             */
             $("#file").live("change",function () {        
                  if($.trim($(this).val())==''){//为空的时候不要继续判断.
                         return false;
                   }
                    var filepath = $(this).val();
                    var extStart = filepath.lastIndexOf(".");
                    var fileExt = filepath.substring(extStart, filepath.length).toUpperCase();
                    if ((fileExt != ".BMP" &amp;&amp; fileExt != ".PNG" &amp;&amp; fileExt != ".fileExt" &amp;&amp; fileExt!= ".JPG" &amp;&amp; fileExt != ".JPEG") &amp;&amp; ((fileExt != ".PDF" &amp;&amp; fileExt != ".DOC" &amp;&amp; fileExt != ".DOCX"))) {
                        top.layer.msg("图片限于bmp,png,gif,jpeg,jpg格式，文档仅限于pdf,Word文档格式");
                        $("#upload").prop("disabled",true);
                    }else{
                        var file_size = 0;
                        if ($.browser.msie) {
                            var img = new Image();
                            img.src = filepath;
                            if (img.fileSize &gt; 0) {
                                 if (img.fileSize &gt; 10240) {
                                    top.layer.msg('文件大小不能超过10M,请重新选择!');
                                    $("#upload").prop("disabled",true);
                                 }else{
                                     top.layer.msg("文件大小符合要求!");
                                    $("#upload").prop("disabled",false);
                                 }
                            }
                        } else {
                            file_size = this.files[0].size;
                            var size = file_size / 1024;
                            if (size &gt; 10240) {
                                top.layer.msg("文件大小不能超过10M,请重新选择!");
                                $("#upload").prop("disabled",true);
                            }else{
                                if($("#upload").prop("disabled")){
                                    top.layer.msg("文件符合要求!");
                                }
                                $("#upload").prop("disabled",false);
                            }
                        }
                    }
            });
           
            $(".deletefile").live("click",function(){
                var delid = $(this).data("id");
                var buttondel = $(this);
                if(delid){
                    //询问框
                top.layer.confirm('确认要删除吗？', {
                      btn: ['确认','取消'] //按钮
                    }, function(index){
                        top.layer.close(index);
                        $.ajax({
                            url:"/deleteFile",
                            data:{
                                "fileId":delid
                            },
                            type:"POST",
                            dataType:"json",
                            success:function(data){
                                if(data.status &amp;&amp; data.status=='0'){
                                    var idStr = $("#resultIdInfo").val();
                                    idStr = idStr.substring(0,idStr.length-1);
                                    var array = idStr.split(",");
                                    var indexarray = array.indexOf(delid);
                                    if (indexarray &gt; -1) {
                                        array.splice(indexarray, 1);
                                    }
                                    $("#resultIdInfo").val("");
                                    if(array.length&gt;0){                                     
                                        $("#resultIdInfo").val(array.join(",")+",");
                                    }
                                    buttondel.parent().parent().remove();//删除当前行.
                                }
                            }
                        });
                       
                    });
                }
               
            })
           
           
            $("#upload").click(function(){
                 var fileinput=$("#file");
                  if($.trim(fileinput.val())==''){
                         top.layer.msg('请先选择文件！');
                         return false;
                   }
                      $("#uploadForm").ajaxSubmit({
                          type: "post",
                          url: $("#uploadForm").attr("action"),
                          success: function (data) {
                                if(data.status &amp;&amp; data.status=='0'){//成功.
                                    var objinfo = data.result;
                                    if(!checkIdRepeat(objinfo.id)){
                                        var resultValue = $("#resultIdInfo");
                                        resultValue.val(resultValue.val()+objinfo.id+",");
                                        $("#fileInfoTable").append(generatorTrHTML(objinfo.id,objinfo.displayName));
                                    }
                                    fileinput.after(fileinput.clone().val(""));//复制一个新的file.    
                                    fileinput.remove();//删除原有文件域.因为如果需要为文件域绑定事件,必须使用live..
                                }else{
                                    top.layer.msg(data.msg);
                                }                              
                          },
                          error: function (msg) {
                              top.layer.msg("文件上传失败!"+msg);    
                          }
                      });
                      return false;
                 
            })
        });
       
        //拼接html.
        function generatorTrHTML(id,name){
            var html =  "&lt;tr id='"+id+"'&gt;&lt;td&gt;"+name+"&lt;/td&gt;&lt;td&gt;&lt;input type='button' data-id='"
                        +id+"' class='btn btn-danger deletefile' value='删除'/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='button' onclick='window.open("/viewfile/"+id+"")'  class='btn btn-primary' value='下载'/&gt;&lt;/td&gt;&lt;/tr&gt;";
                   
            return html;
        }
       
        // 检查是否已经存在ID了.
        function checkIdRepeat(fileid){
            var resultValue = $("#resultIdInfo").val();
            if(resultValue &amp;&amp; resultValue.indexOf(fileid)&gt;0){
                return true;
            }
            return false;
        }
        &lt;/c:if&gt;
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form:form id="uploadForm" enctype="multipart/form-data" modelAttribute="document" action="/saveFile" method="post" class="breadcrumb form-search "&gt;
        &lt;c:if test="${empty list and empty see}"&gt;
            &lt;input id="fileUploadType" name="fileUploadType" type="hidden" value="${fileUploadType}"/&gt;
            &lt;input type="text" id="txt" name="txt" class="input"&gt;&amp;nbsp;&amp;nbsp;&lt;input type="button" onmousemove="file.style.pixelLeft=event.x-60;file.style.pixelTop=this.offsetTop;" value="浏览" size="30" onclick="file.click()" class="btn btn-primary"&gt;
            &lt;input type="file" id="file" onchange="txt.value=this.value" name="file" style="height:26px;" class="files"  size="1" hidefocus&gt;
            &lt;input type="button" id="upload" class="btn btn-warning"  &lt;c:if test="${empty fileUploadType}"&gt;disabled="disabled"&lt;/c:if&gt; value="上传"/&gt;&lt;c:if test="${empty fileUploadType}"&gt;&lt;span&gt;文件上传类型为空,暂时不能上传!&lt;/span&gt;&lt;/c:if&gt;
            &lt;input type="hidden" id="resultIdInfo"  /&gt;
        &lt;/c:if&gt;
    &lt;/form:form&gt;
&lt;/body&gt;
&lt;/html&gt;

到此.