最近在做项目的时候遇到一个看似简单 但是又很头疼的问题,功能是这样的:使用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')}
},
}
好了到此就算完美解决了,抽烟庆祝下