打赏

利用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 = $(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 = $(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。

 

posted @ 2014-09-19 13:15  wangmeijian  阅读(20731)  评论(56编辑  收藏  举报