今天想到了ajax上传文件的问题,不知怎样解决;于是上网搜索,在网上看到了好多文章,看到有人使用Prototype上传其实使用还是基本的方式进行
的,没有使用ajax提交文件,实现方式是使用form方式提交服务器端,然后使用ajax方式到服务器端查询服务器端文件上传的进度,然后
在客户端的进度条上显示进度,没有从更本上使用ajax方式进行上传;最终了解到其实要使用ajax上传文件要在客户端先把文件
使用javascript方式读取出来然后将读取内容通过send的方式提交到服务器端,使用这种方式可能对于客户端来说不太安全,因为脚本需要有
访问客户文件系统的权限;使用ajax方式上传文件到了2种做法(在老外的网站上的)一种使用的是在firefox浏览器下实现的,通过
修改浏览器设置可以访问本地文件系统,然后调用浏览中一个控件方式读取文件的内容,将文件内容和文件名称等信息组合成http协议上传文件的形势
然后通过ajax的open方法和send方法提交到服务,我觉得这种方法有些局限性(现在毕竟使用firefox的用户还是不太多),不过在firefox下能够显示已经不错了;
后来通过在deproject上到通过使用ms系统中控件的方法来实现的方式,我把列出来以后说不定会用上哦;
客户端:
1、首先得到文件信息方法 function getFileParams()
{
//Convert file path to appropriate format
this.filePath = ElementById("file").place(/\\/g, "<A>\\\\</A>");
fso = new ActiveXObject( 'Scripting.FileSystemObject' );
if ( !fso.FileExists(this.filePath) )
{
alert("Can't open file.");
return;
}
f = fso.GetFile( this.filePath );
this.fileSize = f.size;
this.fileName = f.Name;
InitStatusForm();
InitUpload();
}
2、将文件的一些信息通过ajax方式先提交到服务器端
function InitUpload()
{
xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
var parameters = "fileSize=" + encodeURI(this.fileSize) +
"&fileName=" + encodeURI(this.fileName)+
"&overwriteFile=" + ElementById("overwriteFile").checked);
xmlhttp.open("POST","<A href="localhost/AJAXUpload/Upload.asmx/InitUpload">localhost/AJAXUpload/Upload.asmx/InitUpload<;/A>", true);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.setRequestHeader("Content-length", parameters.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(parameters);
}
3、在服务器端有响应后再上传真正的文件内容
为什么要用ajaxfunction HandleStateChange() {
switch (adyState) {
case 4:
response = s
ponseXML.documentElement;
id = ElementsByTagName('ID')[0].firstChild.data;
offset = ElementsByTagName('OffSet')[0].firstChild.data;
bufferLength = ElementsByTagName('BufferLength')[0].firstChild.data;
percentage = (offset/this.fileSize)*100;
if (offset<this.fileSize && !this.cancelUpload)
{
UpdateStatusConsole(percentage, "Uploading");
SendFilePart(offset, bufferLength);
}
else
{
SetButtonCloseState(false);
if (this.cancelUpload)
UpdateStatusConsole(percentage, "Canceled");
else
UpdateStatusConsole(percentage, "Complete");
}
break;
}
}
4、上传文件内容的方法:
function SendFilePart(offset, length)
{
// create SOAP XML document
var xmlSOAP = new ActiveXObject("MSXML2.DOMDocument");
xmlSOAP.loadXML('<?xml version="1.0" encoding="utf-8"?>'+
'<soap:Envelope xmlns:xsi="<A href="/2001/XMLSchema-instance">/2001/XMLSchema-instance<;/A>" '+
'xmlns:xsd="<A href="/2001/XMLSchema">/2001/XMLSchema<;/A>" xmlns:soap="<A href="/soap/envelope/">/soap/envelope/<;/A>"> '+
'<soap:Body>'+
'<UploadData xmlns="<A href="/">/<;/A>" >'+
'<fileName>'+this.fileName+'</fileName>'+
'<fileSize>'+this.fileSize+'</fileSize>'+
'<file></file>'+
'</UploadData>'+
'</soap:Body>'+
'</soap:Envelope>');
// create a new node and set binary content
var fileNode = xmlSOAP.selectSingleNode("//file");
fileNode.dataType = "bin.base64";
// open stream object and read source file
if (adoStream.State != 1 )
{
adoStream.Type = 1; // 1=adTypeBinary
adoStream.Open();
adoStream.LoadFromFile(this.filePath);
}
adoStream.Position = offset;
// store file content into XML node
if (adoStream.EOS)
{
//Close Stream
adoStream.Close();
}
// send XML document to Web server
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("POST", "<A href="localhost/AJAXUpload/Upload.asmx">localhost/AJAXUpload/Upload.asmx<;/A>", true);
xmlhttp.setRequestHeader("SOAPAction", "<A href="/UploadData">/UploadData<;/A>");
xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlhttp.send(xmlSOAP);
}
通过使用ADODB.Stream控件来实现文件的读取,将文件内容封装到了xml文件将xml文件上传到服务器端
以下是服务器端的代码:
[WebMethod]
public XmlDocument InitUpload(int fileSize, string fileName, bool overwriteFile )
{
long offset = 0;
string filePath = GetFilePath(fileName);
if (File.Exists(filePath))
{
if (overwriteFile)
{
File.Delete(filePath);
}
else
{
using (FileStream fs = File.Open(filePath,
FileMode.Append))
{
offset = fs.Length;
}
}
}
return GetXmlDocument(Guid.NewGuid(), string.Empty, offset,
(InitialBufferLength+offset)>fileSize?(int)(fileSize-offset):InitialBufferLength);
}
public XmlDocument UploadData(string fileName, int fileSize, byte[] file)
{
if (fileName == null || fileName == string.Empty || file == null)
return GetXmlDocument(Guid.NewGuid(), "Incorrect UploadData Request", 0, 0);
string filePath = GetFilePath(fileName);
long offset=0;
using (FileStream fs = File.Open(filePath, FileMode.Append))
{
fs.Write(file, 0, file.Length);
offset = fs.Length;
}
return GetXmlDocument(Guid.NewGuid(), string.Empty, offset,
(InitialBufferLength+offset)>fileSize?(int)(fileSize-offset):InitialBufferLength);
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论