是这样的……
最近遇到这样一个问题,在表单提交前,需要把文件传递到服务器,但是这时候问题就来了.表单ID还没有呢(存文档肯定要和表单ID关联啊),于是之前想了一个办法:
在iFrame中,每次上传完文件之后,将文件的信息带回到前台(文件信息不多,基本就是文件名,后台存储文件名,上传人,时间这些.),问题出现在上传了5个文件之后.因为之前一直都是可以直接运行.上传到第5个文件的时候,iFrame页面显示空白,后台没提示报错!!再次尝试,打开F12,看到了URL后面那一长串(预估计超过1000个字符)的参数,竟然每次都是用的GET方式……
上述情况发生后,只能想各种办法,之前大概想到的有如下几个:
- 后台传回前台的数据,只保留部分重要的;
- 改用POST方式(这里解释一下:后台传递完文件,需要跳转到list列表页面),但是这个方法完全不行;
- 提前生成表单ID,这个更不靠谱.
经过了一个周末,终于想到了解决办法:Ajax上传(其实上周是想到过这个方法的,只是当时报错也就没怎么在意了).
异步上传
这个地方去下载:地址.
使用如下:
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> |
持续更新，持续来访。