日期:2014-05-17 浏览次数:20779 次
不过在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;
}
?
?