近期给公司做了一个小项目,其中一个页面要求要上传8到10个附件,也就是说一个页面要有至少8个文件上传控件(不能使用多文件上传控件因为其中一部分附件要求用户上传文件的同时还要填写上传的为何种附件)。
初步做法为:写多个input[file]控件放到form提交,发现在nginx环境下会超出最大限制,会报413 entity too large错误;
之后考虑针对单个文件上传采用异步方式,这样就可以化解一次性提交多个文件的问题,我们采用了jQuery的ajaxfileupload插件;但是,接着,为了增强用户体验需要上传成功后将上传后的地址回填至file控件,这样该方案又不适合了,因为浏览器拒绝js中修改file控件的值。
最终,采用了流行的swfupload这种flash控件来解决问题。
这期间发现一些file的浏览器操作即兼容性问题:
1.js不能控制input[file]控件的值,只能是点击“浏览”才可以
2.input[file]控件的值在各个浏览器下可以获取,但是firefox下获取的是文件的名字不包含路径,而ie下则获取到的是该文件在用户机器上的完整路径如:c:\1.jpg
3.在ie下,若是用js触发file控件来实现浏览(如将input[file]的display设置为none,用input[text]来作为替代方案),则在提交时ie会提示“拒绝访问错误”。[b]因为ie要求file控件必须是点击“浏览”来上传文件;解决方法为:将file控件放在div并设置样式为透明,覆盖在text之上,这样用户看到的是text控件,操作的确实file控件。[/b]
4.firefox下虽然头部已设置了no-cache,但是连续多次上传时,从第二次开始一直获取到的是首次上传的文件(如第一次上传文件过大,第二次换个小文件依然如此,调试发现获取的仍是第一次上传的文件)。[b]j解决办法为:每次将file控件对象传给js方法,而不是通过document.getElementById或者document.getElementsByName(如upload(this))[/b]
5.对于
初步做法为:写多个input[file]控件放到form提交,发现在nginx环境下会超出最大限制,会报413 entity too large错误;
之后考虑针对单个文件上传采用异步方式,这样就可以化解一次性提交多个文件的问题,我们采用了jQuery的ajaxfileupload插件;但是,接着,为了增强用户体验需要上传成功后将上传后的地址回填至file控件,这样该方案又不适合了,因为浏览器拒绝js中修改file控件的值。
最终,采用了流行的swfupload这种flash控件来解决问题。
这期间发现一些file的浏览器操作即兼容性问题:
1.js不能控制input[file]控件的值,只能是点击“浏览”才可以
2.input[file]控件的值在各个浏览器下可以获取,但是firefox下获取的是文件的名字不包含路径,而ie下则获取到的是该文件在用户机器上的完整路径如:c:\1.jpg
3.在ie下,若是用js触发file控件来实现浏览(如将input[file]的display设置为none,用input[text]来作为替代方案),则在提交时ie会提示“拒绝访问错误”。[b]因为ie要求file控件必须是点击“浏览”来上传文件;解决方法为:将file控件放在div并设置样式为透明,覆盖在text之上,这样用户看到的是text控件,操作的确实file控件。[/b]
4.firefox下虽然头部已设置了no-cache,但是连续多次上传时,从第二次开始一直获取到的是首次上传的文件(如第一次上传文件过大,第二次换个小文件依然如此,调试发现获取的仍是第一次上传的文件)。[b]j解决办法为:每次将file控件对象传给js方法,而不是通过document.getElementById或者document.getElementsByName(如upload(this))[/b]
5.对于
var newFileObj = $(file控件对象).clone();
在firefox下得到的newFileObj通过newFileObj.val()可以看到能获取到值;而在ie下newFileObj的值为空,用clone(true)方法在ie下仍然为空