HTML5的Ajax上传（非表单提交方式）

不过在Firefox3中，可以借助下面的方法来调试ajax发送post二进制数据：function postFile(fromfile,toUrl,callback,onProgress){xhr = new XMLHttpRequest(),upload=xhr.upload;xhr.onreadystatechange=function(){if(xhr.readyState===4)callback(xhr.responseText);};if(upload)upload.onprogress=function(ev){onProgress(ev.loaded);};else onProgress(-1);//不支持进度xhr.open("POST", toUrl);xhr.setRequestHeader('Content-Type', 'application/octet-stream');xhr.setRequestHeader('Content-Disposition', 'attachment; name="'+inputname+'"; filename="'+fromfile.fileName+'"');if(xhr.sendAsBinary)xhr.sendAsBinary(fromfile.getAsBinary());else xhr.send(fromfile);}

HTML5的拖拽上传功能可拆分为两个部分实现，一个是对象的拖拽功能，另一个是上传功能。拖拽功能的实现基于HTML5 DOM对象的拖拽事件 ，FF3.6+和Chrome7+都实现了该功能，所以不用做特别的兼容

?

?

具体参照：http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/index.html

?

?

?

普通的表单提交方式

this.html4Upload=function(fromfile,toUrl,callback){debugger;var uid = new Date().getTime(),idIO='jUploadFrame'+uid,_this=this;var jIO=$('<iframe name="'+idIO+'" />').appendTo('body');var jForm=$('<form action="'+toUrl+'" target="'+idIO+'" method="post" enctype="multipart/form-data" class="xheHideArea"></form>').appendTo('body');var jOldFile = $(fromfile),jNewFile = jOldFile.clone().attr('disabled','true');jOldFile.before(jNewFile).appendTo(jForm);this.remove=function(){if(_this!==null){jNewFile.before(jOldFile).remove();jIO.remove();jForm.remove();_this=null;}}this.onLoad=function(){var ifmDoc=jIO[0].contentWindow.document,result=$(ifmDoc.body).text();ifmDoc.write('');_this.remove();callback(result,true);}this.start=function(){jForm.submit();jIO.load(_this.onLoad);}return this;}

?