首页 > 代码库 > 利用iframe无刷新上传文件的坑
利用iframe无刷新上传文件的坑
原文:利用iframe无刷新上传文件的坑
页面里经常要用到文件上传的功能，而且要求页面不刷新，先说一下原理：页面里放一个file控件和submit按钮，外面用form表单包住，给form表单加上对应的属性值，action、method、entype、name，到这一步，能上传文件了，但是这样上传文件会刷新页面，这不是我们想要的。我们要的是文件上传时不刷新页面，那么也简单，在页面里放一个iframe，设置它的宽高为0，这里有两个坑：
1、需要设置iframe的name值与form的target属性值一样，意思就是把form表单上传文件的刷新转嫁到iframe里去了；
2、form表单的enctype属性值必须设置成multipart/form-data，将文件转换成文件流供后端接收；
代码如下：
<iframe name="fileUpload"></iframe><form method="post" action="xxxx" enctype="multipart/form-data" name="fileForm" target="fileUpload"> <input type="file" class="fileInput" name="fileInput"> <input type="submit" value="提交" /></form>
页面（这里为了看到效果，就不将iframe的宽高设为0了）：
事情就这么愉快地结束了吗？当然没有，离国庆节还有那么些天，不要着急。
到这里文件能上传了，页面也不会刷新，那么还差什么？当然是精益求精--优化啦。怎么优化？假如页面里有三个地方需要上传不同类型的文件，最好的办法肯定不是在页面里将代码copy三份，然后就这样用，这是普通开发的做法，我们可以利用js动态生成上面这些代码，需要上传文件的地方，一个函数加参数就搞定了，代码如下：
/*2014年9月18日17:39:47 By 王美建*/function ajaxUpload(opt){ /* 参数说明: opt.frameName : iframe的name值; opt.url : 文件要提交到的地址; opt.fileName : file控件的name; opt.format : 文件格式，以数组的形式传递，如[‘jpg‘,‘png‘,‘gif‘,‘bmp‘]; opt.callBack : 上传成功后回调; */ var iName=opt.frameName; //太长了，变短点 var iframe,form; //创建iframe和form表单 iframe = $(‘<iframe name="‘+iName+‘" />‘); form = $(‘<form method="post" style="display:none;" target="‘+iName+‘" action="‘+opt.url+‘" name="form_‘+iName+‘" enctype="multipart/form-data" />‘); file = $(‘<input type="file" name="‘+opt.fileName+‘" />‘); file.appendTo(form); //插入body $(document.body).append(iframe).append(form); //触发浏览事件，选择文件 file.click(); //选中文件后，验证文件格式是否符合要求 file.change(function(){ //取得所选文件的扩展名 var fileFormat=$(this).val().exec(/\.[a-zA-Z]+$/)[0].substring(1); if(opt.format.join(‘-‘).indexOf(fileVal)!=-1){ form.submit();//格式通过验证后提交表单; }else{ iframe.remove(); form.remove(); alert(‘文件格式错误，请重新选择！‘); } }); //文件提交完后 iframe.load(function(){ var data = http://www.mamicode.com/$(this).contents().find(‘body‘).html(); opt.callBack(data); iframe.remove(); form.remove(); })}
使用方法：在页面里放一个按钮Btn，点击Btn时触发ajaxUpload方法，ajaxUpload方法内部自动创建上传所需要的元素并自动触发file.click()事件供用户选择文件，选中文件后自动验证文件格式并提交，然后返回后端返回的结果，到这里，问题解决了80%，为什么不是100%？ajaxUpload方法在IE8以上及火狐、chrome浏览器都没有问题，但在IE8及以下的浏览器上传文件会提示：没有权限！这是因为低版本的IE做了安全限制，file控件必须由用户主动点击触发选择的文件才可以上传，而不能使用js的click事件来模拟点击触发。在此我又想说，IE我~！@#￥%……&*（）——……。
办法总比困难多，既然一定要由用户点击来触发，那么直接把页面里的按钮替换成file控件吧，iframe和form还是动态创建，当用户点击file控件选择文件后，会触发file控件的chang事件，给file控件的change事件绑定ajaxUpload方法并将file控件的id传进去，ajaxUpload方法通过id获取file控件并将file控件appendTo到动态创建的form里，之后的步骤与上面无异——验证格式→提交表单→触发回调。细心的同学会发现，选择文件后，file控件会appendTo到form表单里，那页面里放file控件的地方不是空了么？并且，表单提交后，file会随着form一起被remove掉，所以，在file控件appendTo到form前，先建一个变量P将file控件的父级存起来，form表单提交之后，先将file控件appendTo回到P里面，当然，file控件appendTo到form时，file控件依然会在页面里消失，所以页面里的Btn要保留，把file控件定位在Btn上面，透明度设置成0，这样点击Btn实际上点击的是盖在上面的file控件，这样即使file控件被appendTo到form里面，用户也不会察觉到什么变化，问题迎刃而解！兼容的写法如下:
/*2014年9月19日11:11:07 By 王美建*/
function ajaxUpload(opt){ /* 参数说明: opt.id : 页面里file控件的ID; opt.frameName : iframe的name值; opt.url : 文件要提交到的地址; opt.format : 文件格式，以数组的形式传递，如[‘jpg‘,‘png‘,‘gif‘,‘bmp‘]; opt.callBack : 上传成功后回调; */ var iName=opt.frameName; //太长了，变短点 var iframe,form,file,fileParent; //创建iframe和form表单 iframe = $(‘<iframe name="‘+iName+‘" />‘); form = $(‘<form method="post" style="display:n1one;" target="‘+iName+‘" action="‘+opt.url+‘" name="form_‘+iName+‘" enctype="multipart/form-data" />‘); file = $(‘#‘+opt.id); //通过id获取flie控件 fileParent = file.parent(); //存父级 file.appendTo(form); //插入body $(document.body).append(iframe).append(form); //取得所选文件的扩展名 var fileFormat=/\.[a-zA-Z]+$/.exec(file.val())[0].substring(1); if(opt.format.join(‘-‘).indexOf(fileFormat)!=-1){ form.submit();//格式通过验证后提交表单; }else{ file.appendTo(fileParent); //将file控件放回到页面 iframe.remove(); form.remove(); alert(‘文件格式错误，请重新选择！‘); }; //文件提交完后 iframe.load(function(){ var data = http://www.mamicode.com/$(this).contents().find(‘body‘).html(); file.appendTo(fileParent); iframe.remove(); form.remove(); opt.callBack(data); })}
国际惯例，到这里，方法已经接近完美了，为什么是接近？来看一张图片：
结构代码：
.fileInput{ position: absolute;left: 0;top: 0;height: 30px; filter:alpha(opacity=60);opacity:0.6; background-color: transparent;}.btn{width: 200px;height: 30px; margin: 100px auto; background-color: yellow; text-align: center; line-height: 30px; overflow: hidden; display: block; position: relative;}<div class="btn">选择文件<input type="file" class="fileInput" name="fileInput"></div>
这就是放在页面里的file控件，外面用一个div包住，在IE10及以下浏览器中，用户单击红色框部分是不会弹出文件选择框的，必须单击蓝色部分或双击红色部分才行，要让蓝色部分占满外面的div怎么做到呢？用css设置宽度只会增加红色部分的宽度，这时我们会发现蓝色部分是有字的，对，可以通过设置font-size来使蓝色部分变宽，然后给file控件加上dir="rtl"，这会让浏览按钮移到左边，再给.btn加上overflow:hidden，可以发现浏览按钮已经占满整个div了，如下图：
到这里才真正完成了100%，最后，我们还可以给file控件设置accept属性，限制可选文件格式（IE8及以下不支持该属性），别忘了把file控件的透明的改为0。
利用iframe无刷新上传文件的坑
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。