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