Entry
How can I do a file uploading from client browser to server?
May 20th, 2003 14:38
Robert Bivins, Andy Cork, Martin Honnen, Sergey Tay,
You do not use client side JavaScript for that but just a FORM with an
INPUT TYPE="FILE" element:
<FORM NAME="formName"
ACTION="yourServerSideFileUploadHandler"
METHOD="post"
ENCTYPE="multipart/form-data"
>
<INPUT TYPE="file" NAME="fileName">
<INPUT TYPE="SUBMIT">
</FORM>
The browser which supports file upload displays a browse button to open
a file selection dialog and handles the file upload on form submission.
Note that you need to have a server side file upload handler, e.g. a
cgi script, a servlet, an asp page etc.
Andy:
Another way i found to do this was by using the ADODB object to stream
the file data in binary into an XML node using the following code (in
two files, the client and the server)
CLIENT CODE (page1.htm)---------------------------------------------
<HTML>
<HEAD><TITLE>File Send</TITLE></HEAD>
<BODY>
<INPUT id=btn_send name="btn_send" type=button value="FILE SEND">
<DIV id=div_message>Ready</DIV>
</BODY>
</HTML>
<SCRIPT LANGUAGE=JavaScript>
// files upload function
function btn_send.onclick()
{
// create ADO-stream Object
var ado_stream = new ActiveXObject("ADODB.Stream");
// create XML document with default header and primary node
var xml_dom = new ActiveXObject("MSXML2.DOMDocument");
xml_dom.loadXML('<?xml version="1.0" ?> <xml/>');
// specify namespaces datatypes
xml_dom.documentElement.setAttribute("xmlns:dt", "urn:schemas-
microsoft-com:datatypes");
// START - place the bit between this comment and my other comment
// in a seperate function if you wish to do multiple file upload.
// You then need to recurse through all files calling it
// create a new node and set binary content
var l_node1 = xml_dom.createElement("file1");
l_node1.dataType = "bin.base64";
// open stream object and read source file
ado_stream.Type = 1; // 1=adTypeBinary
ado_stream.Open();
ado_stream.LoadFromFile("c:\\tmp\\myfile.doc");
// store file content into XML node
l_node1.nodeTypedValue = ado_stream.Read(-1); // -1=adReadAll
ado_stream.Close();
xml_dom.documentElement.appendChild(l_node1);
// END comment for seperate function - multiple file upload
// send XML documento to Web server
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("POST","./file_receive.asp",false);
xmlhttp.send(xml_dom);
// show server message in message-area
div_message.innerHTML = xmlhttp.ResponseText;
}
</SCRIPT>
SERVER CODE (file_receive.asp)---------------------------------------
<%@ LANGUAGE=VBScript%>
<% Option Explicit
Response.Expires = 0
' define variables and COM objects
dim ado_stream
dim xml_dom
dim xml_file1
' create Stream Object
set ado_stream = Server.CreateObject("ADODB.Stream")
' create XMLDOM object and load it from request ASP object
set xml_dom = Server.CreateObject("MSXML2.DOMDocument")
xml_dom.load(request)
' retrieve XML node with binary content
set xml_file1 = xml_dom.selectSingleNode("root/file1")
' open stream object and store XML node content into it
ado_stream.Type = 1 ' 1=adTypeBinary
ado_stream.open
ado_stream.Write xml_file1.nodeTypedValue
' save uploaded file
ado_stream.SaveToFile "c:\tmp\upload1.doc",2 '
2=adSaveCreateOverWrite
ado_stream.close
' destroy COM object
set ado_stream = Nothing
set xml_dom = Nothing
' write message to browser
Response.Write "Upload successful!"
%>
----------------------------------------------------------------------
I can't take full credit for this as I found most of this code
somewhere else on the net (If its you add you name on...can't remember
where i found it!). I have edited it and tested it. I have had it
working with multiple files by editing the code so that multiple nodes
are created etc. So far I have managed to test uploading 150MB of data
to the server using this (both as one large file and as multiple
smaller files). The one drawback with this is it takes a lot of CPU
time and a lot of memory on the client....if anyone can see why this is
so let me know, but I suspect that IE buffers all the XML before it
streams it to the server...
Hope this is some use!
