您的位置:首页 > 产品设计 > UI/UE

easyUI dialog 缓存问题引起form表单提交文件的错乱

2018-02-03 14:21 351 查看
 最近在做项目的时候遇到一个看似简单 但是又很头疼的问题,功能是这样的:使用easyUI的dialog弹出的一个form的提交文件的上传功能,简单吧?就这么简单一个问题花了我一天的时间,当然脑子比较不灵光哈,废话少说进入正题,遇到的问题是这样的:在上传文件的时候初次操作'不选文件直接上传',当然会上传失败了!服务器返回的没毛病! 问题来了,,,,当dialog.close()之后从新上传文件,这次的操作是'选择一个文件'点击上传,当然会上传成功了!这是正常的情况下才会出现的,但是咱们说的不是正常情况,返回的结果跟第一次是一样的,服务器返回的额是上传失败!

又测试了一次,重新刷新大页面,初次操作"选择一个文件",服务器返回上传成功!第二次操作"无论选择文件还是不选择文件"都会上传成功,但是上传的初次选择的那个文件,在继续操作又正常了!只有初次进去的时候的前两次操作有问题(可能测试的还不够全面),但是就抓住这几个现象想的我头都大了,没办法问一下度娘吧,查了好多么有找到正题,

突然看到一个博客还是很贴近的https://www.cnblogs.com/lwucoder/archive/2017/03/16/web_cache_method.html,有兴趣可以进去看看,有三种方法,一是禁止浏览器从本地计算机中访问页面的缓存缓存内容,二是表单每次提交以后reset()一下,三是ajax清理缓存,就挨个试了下,可能遇到的情况不一样,方法一对我无效,方法二有效,呱唧呱唧,出去抽根烟庆祝下.....然而只解决了一个现象的问题,初次上传文件,第二次就会上传正常了,不是缓存初次的文件了,问题解决了,再试试初次不上传文件,第二次选择一个文件试试,心碎了......问题还在,

多方求助,最后在同事的帮助下知道了,easyUI的dialog缓存问题,把dialog,$(this).dialog('destroy')掉,又试了下,好使了,都好用了,终于完事了,就在我打算出去抽一包烟庆祝的时候,又有一个新问题来了,就是dialog只能弹出来两次(至今不知道原因),两次操作以后就歇菜了,也是按钮再点击不管用了,因为你把dialog destroy掉了,除非刷新整个页面重新在建,但是这不符合操作习惯,也很容易降低客户体验,所以又是一顿百度,很快就找到一个除根的方法了,那就是"操作完以后直接吧div
remove掉,再从新创建一个自己的div,问题完美解决,附上解决方法:

body里面的<div id="a"></div>

function upload(){

        var dialogParent = $('#a').parent();  

        var dialogOwn = $('#a').clone();  

     dialog = $('#a').dialog({
                title: '导入',
   
                href: '页面',
                maximizable: false,
                modal: true,
                onClose : function() {
               
dialogOwn.appendTo(dialogParent); 
                        $(this).dialog('destroy').remove();
                    },

    buttons: {  

       "取消": function () {
dialog.dialog('close');},  

        "确定": function () {
dialog.dialog('close')}  

           },

}

好了到此就算完美解决了,抽烟庆祝下
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: