近期给公司做了一个小项目,其中一个页面要求要上传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会提示“拒绝访问错误”。
因为ie要求file控件必须是点击“浏览”来上传文件;解决方法为:将file控件放在div并设置样式为透明,覆盖在text之上,这样用户看到的是text控件,操作的确实file控件。
4.firefox下虽然头部已设置了no-cache,但是连续多次上传时,从第二次开始一直获取到的是首次上传的文件(如第一次上传文件过大,第二次换个小文件依然如此,调试发现获取的仍是第一次上传的文件)。
j解决办法为:每次将file控件对象传给js方法,而不是通过document.getElementById或者document.getElementsByName(如upload(this))
5.对于
var newFileObj = $(file控件对象).clone();
在firefox下得到的newFileObj通过newFileObj.val()可以看到能获取到值;而在ie下newFileObj的值为空,用clone(true)方法在ie下仍然为空
分享到:
相关推荐
这个案例是 html5的input file控件将文件上传到后台。
一个file控件实现上传多个文件到服务器,并且导入数据库中并且页面无刷新(附带所需要的js和java包)
保你好用! 网上有很多file预览本地的图片,可在客户端不行。自己用滤镜写了一个预览本地的图片,服务端客户端都可以,兼容主流浏览器。如果好用,请赞!赞!
html修改FileUpload控件的浏览按钮的文字改为自定义
解决无法为FIle控件赋值的问题!并且支持中文赋值问题
asp.net多文件上传使用html控件的File控件,在form中就需要加入【 enctype=”multipart/form-data”】。 up3.aspx文件代码 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”up3....
NULL 博文链接:https://weistar.iteye.com/blog/2206977
控件提供各种调用的参数和方法,同时还有各个状态的回调函数,无论您使用自带的标准界面,或是使用自己定制的界面,控件一样健康运作。 控件特点: 1.健康地上传文件,无论文件有多大!极具容错功能。 2.支持文件...
HTML的文件上传控件的样式很不好的,我自己在网上找到的资料整合给大家。
想要实现这一功能,用input的file控件来实现就好啦~ XML/HTML Code复制内容到剪贴板 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document...
java 中FIle类的使用总结,有File的创建,文件夹的创建,文件的创建,文件的复制,文件的转移等等
包jar包含 tableView控件,tree控件 图片控件 二维码扫码生成控件,文件选择控件 file ,k可调用readme类获取使用方法,解析后可获取里面用到的jar包
上传控件input type='file' css 样式美化
使用HTML开发商业网站 表单控件-Input控件 ...input控件在页面中的显示宽度 readonly readonly 该控件内容为只读(不能编辑修改) disabled disabled 第一次加载页面时禁用该控件(显示为灰色) chec
1. 理解HTML5中的FileList对象与file对象。 在HTML5中,FileList对象表示用户选择的文件列表。通过添加multipe属性,file控件内允许一次选择多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList...
详细对File类的方法和属性及用法进行分类和归纳
1.关于如何用脚本修改fileupload控件值的问题, 开发环境vs2005,在上传文件时,需要一个取消的按钮来清空type=file的value,而且这个页面上有多个file控件 这个比较麻烦因为file的值本身是不允许用脚本修改的(安全角度...
如何判断input file表单里上传的图片的宽高和大小呢? 解决方案 这个时候图片还没真正上传,也不是在页面上展示,不能使用$(“#id”).width(),$(“#id”).height()这种方式。 在Stack Overflow找到一个方法获取input...
详细的介绍了FILE文件的操作,附有源代码参考。