在两个模态框中保存数据并实现文件上传问题

来源:互联网 发布:什么是网络综艺节目 编辑:程序博客网 时间:2024/06/17 12:13

问题:

用户接受任务时候,会相应的弹出第一个模态框,在此模态框中展示了用户所需要填写的信息,其中最后一个是添加步骤的链接,用户点击这个链接,将会弹出第二个模态框,在第二个模态框中会让用户填写一个表格,分别是表格的一些文本内容,并且最后一个是用户可以上传的文件,用户点击第一个模态框会将数据提交之后台。一开始是想将用户在第二个模态中所填写的数据隐藏到第一个模态框中(文件部分存入了文件的上传路径),这样的话可以在后台通过路径去复制文件至服务器,当然这个只能在IE浏览器下实现,因为火狐谷歌等其他浏览器均因为安全问题无法获取上传文件的上传路径。但是最后出现了一个问题,在本机用IE上传文件一切都可以成功,但是其他人员用他们的自己的PC上传却出错,调试了一下代码,发现在IE浏览器上,无论他们从哪个位置上传文件,他们获取的文件上传路径均是"C:\fakepath\"+文件名的形式,查询了一下,发现是因为设置问题:工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即可。之所我的是可以的,是因为我的是启用状态,但是其他人的不是启用状态。

知道了问题所在,然后在网上查了好多,什么用js设置(如下):

//附带不用修改浏览器安全配置的javascript代码,兼容ie, firefox全系列    function getPath(obj)    {       if(obj)         {        //  IE11的版本是rv:11     if (window.navigator.userAgent.indexOf("MSIE")>=1 || window.navigator.userAgent.indexOf("rv:11") >= 1) {          {             obj.select();              return document.selection.createRange().text;           }            else if(window.navigator.userAgent.indexOf("Firefox")>=1)           {           if(obj.files)             {                return obj.files.item(0).getAsDataURL();             }           return obj.value;           }         return obj.value;         }    }    

 
通过上面的方法还是没有任何效果(我的IE版本是11,火狐是51)

网上统一的回复都是因为安全性的提高,恐怕无法获得上传文件的文件路径,要不然解决办法就是上面的说的设置浏览的属性等,但是我们不能要求客户都要这么做,所以,最终情况下,我选择不从这个方向去解决这个问题,试着看能不能在完成第二个模态框数据的添加完成之时,就将数据存储至后台,接下来面对的问题就是,数据保存至后台之后返回至页面,当前页面不能刷新,并且第一个模态框还必须存在,还有一个现实的问题,就是我们不能保证用户一定会是在很短的时间呢完成接收任务,万一他因为其他原因用了好几分钟才完成的接收任务,所以在第二个模态框 数据提交的时候数据还不能保存至数据库,所以,最终决定在第二个模态框提交的时候,利用multipart/form-data先将文件上传至服务器中,然后利用异步提交文件将文件上传至服务器(如下):

var formData = new FormData(document.getElementById("proceForm")); var path = document.getElementsByName("path");formData.append("path",path.files);$.ajax({            contentType:"multipart/form-data",          url:"${contextPath}/tcxtask/saveProcessFile",            type:"POST",          data:formData,          dataType:"text",          processData: false,  // 告诉jQuery不要去处理发送的数据          contentType: false,   // 告诉jQuery不要去设置Content-Type请求头          success: function(data){           // 将作业步骤信息添加至接收任务模态框            if(data == "1"){     $("#workProcessList").html(list);     $("#isAddWork").attr("style","display: block;color: green;");        }else if(data == "0"){         alert("作业步骤中添加文件失败,请查看所上传的文件是否符合要求!");        }         },        error: function(){         alert("作业步骤中添加文件失败!");        }    });  


上传之后,同样还是会将第二个模态框中的所有数据隐藏至第一个模态框(文件部分还是隐藏文件的value值),提交至后台,这个时候不管是哪种浏览器,会将前台传递过来的文件值进行处理,如果是火狐、谷歌等等之类的浏览器,传递过来的是文件名称,会将该项目的全路径和文件名称进行拼接,然后存储数据库中,但是如果是IE,传递过来的是一个路径,不管是正确的路径还是已经实施了安全机制的路径,对其截取文件名称部分,然后和项目全路径进行拼接,进行保存数据库,这样无论是哪个浏览器,都不会出现文件上传开始出现的问题。



再次更新,最终的解决办法我依然没有获取到上传文件的绝对路径,但是我在添加步骤完成的时候将文件存入至服务器,同样的将步骤信息隐藏到第一个模态框中(上传文件只保存文件名称),然后接收任务将数据传至后台进行数据处理

阅读全文
0 0
原创粉丝点击