文件提交.docVIP

/cloudgamer/archive/2008/10/20/1314766.html?效果预览 上传文件 添加文件： 文件路径 没有添加文件 ? 温馨提示：最多可同时上传 3个文件，只允许上传 jpg，gif文件。 ??? 这里的预览只是前台的效果，要整个系统测试请下载完整实例。 程序说明 【无刷新上传】 要实现文件上传，form必须设置几个属性：1.action：设为要处理数据的页面地址；2.method：设为post；3.enctype/encoding：必须设为multipart/form-data，这里要注意的是在ie中用js修改form的enctype属性是没有效果的，只能修改encoding； 后面两个属性程序初始化时都有设置： this.Form.method?=?post;this.Form.encoding?=?multipart/form-data; 要注意这里的无刷新不是ajax哦，而是利用“古老”的iframe。由于ajax提交数据必须先获取数据，而js（一般情况下）是不能操作客户端文件，要获取文件数据就更不用说了，所以只能用iframe来做。先说说iframe实现无刷新上传的原理：利用form的target属性，把数据提交到页面中一个（通常为隐藏的）iframe上。直观点说就是把“刷新”留给iframe。其实原理跟一般用iframe实现无刷新提交表单是一样的，只是这里换成是文件。这里关键就是把form的target设为iframe的name： this.Form.target?=?this._FrameName; 【iframe】 如果没有自定义iframe，程序在初始化时会自动创建无刷新所需的iframe的。首先必须选择一个iframe名，这在无刷新时是必须的，为了每个实例能创建各自的iframe，这里用了一个随机数： this._FrameName?=?uploadFrame_?+?Math.floor(Math.random()?*?1000); 也可以用一个递增的计算器来代替随机数。 接着创建iframe，本以为用document.createElement(iframe)创建再设置它的name属性就行了。却发现这样设置的name在ie居然不认（有说name是只读属性），还好在网上找到一个方法：“IE 创建元素，还有一个特点，就是可以连同属性一同创建”。例如我想给动态创建的iframe设置name，可以这样： document.createElement(iframe?name=\?+?this._FrameName?+?\) 不过这个方式在ff会报错：uncaught exception: String contains an invalid character (NS_ERROR_DOM_INVALID_CHARACTER_ERR)估计是用createElement时不能带name，标准应该也是这样，所以兼容的方式这样写： Codevar?oFrame?=?isIE???document.createElement(iframe?name=\?+?this._FrameName?+?\)?:?document.createElement(iframe);//为ff设置nameoF?=?this._FrameName;oFrame.style.display?=?none;var?oFrame?=?isIE???document.createElement(iframe?name=\?+?this._FrameName?+?\)?:?document.createElement(iframe);//为ff设置nameoF?=?this._FrameName;oFrame.style.display?=?none; 关于这方面更详细的内容请看这里。创建完还需要插入到body中，一般的做法是使用document.body.appendChild，但在ie中会有“已终止操作”错误，可以用下面这段代码测试： Codebodydivscriptdocument.body.appendChild(document.createElement(div));/script/div/bodybodydivscriptdocument.body.appendChild(document.createElement(div));/script/div/body 网上找到一个解析：“原来FF下的实现机制是当页面还没有完全读取完时body元素就已经存在了，而IE只有页面完全读取结束body元素才会存