日期:2014-05-17 浏览次数:20575 次
不过在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+'" class="xheHideArea" />').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; }?
?