When adding a new data item, you can use ajax to achieve no re-submission. However, when uploading a file, the <asp: fileUpload> is uploaded to js for calling using string values. I have found two methods to solve the problem and achieve no refreshing upload.
Method 1: Use js ADODB. stream, which first converts a file into a Stream and then uploads it to the server through js. The advantage is that it can upload a large file, and because it is a data Stream, supports resumable upload and display of upload progress. The only drawback is that the client browser needs to set the security level or install the ActiveX control (this control is self-made and loaded to the page ).
Related code:
Files include: 1 front-end page: upload.html, 1 js control: upload. js, 1 background processing page: Accept. aspx (Accept. aspx. cs)
The code file is as follows:
Upload.html
Upload. jsCopy codeThe Code is as follows: var g_XMLHttp = null;
Var g_Stream = new ActiveXObject ('ADODB. stream ');
Var g_SendCount = 0;
Var g_TotalCount = 0;
Var g_FileSize = 0;
Var g_UpFileType = 0;
Var g_BlockSize = 1024*100; // each segment is divided into 100 K
Var fileExtName = ""; // file suffix
Var g_PauseFlag = false;
Var g_BeginTime = null;
Var g_guageFlag = false;
Var Nfilename = "";
Function Init ()
{
InitTitleEvent ();
BeginUpLoadFile ();
}
Function MoveGuage ()
{
Var t_Time = new Date ();
Var t_OddTime = Math. ceil (t_Time.getTime ()-g_BeginTime.getTime ()/g_SendCount * (g_TotalCount-g_SendCount)/1000 );
Var t_OddTimeString = '';
If (t_OddTime> = 3600)
{
T_OddTimeString = Math. floor (t_OddTime/3600) + 'time ';
T_OddTime % = 3600;
}
If (t_OddTime> = 60)
{
T_OddTimeString + = Math. floor (t_OddTime/60) + 'Min ';
T_OddTime % = 60;
}
Document. all. lblLeavingsTime. innerText = t_OddTimeString + t_OddTime + 'second ';
}
// The first parameter indicates the upload type. It is a reference for naming a new file.
// The first parameter indicates whether to display the status bar.
Function BeginUpLoadFile (upFileType, guageFlag)
{
If (g_Stream = null)
{Alert ("your machine does not support ADODB. Stream .");}
Else
{
G_guageFlag = guageFlag;
G_UpFileType = upFileType;
G_Stream.Type = 1;
G_Stream.Open ();
Var pth = document. getElementById ("hidFilePath"). value;
G_Stream.LoadFromFile (pth );
Var fname = pth. split ('\\');
Nfilename = fname [fname. length-1];
FileExtName = Nfilename. split ('.') [1]. toLowerCase ();
G_Stream.position = 0;
G_SendCount = 1;
G_FileSize = g_Stream.size;
If (upFileType = 0) // upload an image
{
If (g_FileSize> 1024*1024*2) // The value cannot exceed 2 MB.
{
Document. all. returnInfo. innerText = "the file size exceeds 2 MB! ";
G_PauseFlag = true;
Return;
}
Var str = "bmp, jpg, jpeg, gif, png, icon ";
If (str. search (fileExtName) =-1) // The image format cannot exceed the range.
{
Document. all. returnInfo. innerText = "the file format is incorrect. Select bmp, jpg, jpeg, gif, png, and icon format! ";
G_PauseFlag = true;
Return;
}
}
G_TotalCount = Math. ceil (g_Stream.size/g_BlockSize );
G_BeginTime = new Date ();
SendData ();
}
}
Function SendData ()
{
If (g_PauseFlag)
{
Return;
}
If (g_SendCount <= g_TotalCount)
{
Var t_XMLDOM = null;
Var t_Root = null;
Var t_Node = null;
Var t_Attribute = null;
T_XMLDOM = new ActiveXObject ('Microsoft. XMLDOM ');
T_XMLDOM.async = false;
T_XMLDOM.resolveExternals = false;
T_Node = t_XMLDOM.createProcessingInstruction ('xml', 'version = "1.0 "');
T_XMLDOM.appendChild (t_Node );
T_Root = t_XMLDOM.createElement ('root ');
T_XMLDOM.appendChild (t_Root );
T_XMLDOM.documentElement.setAttribute ('xmlns: dt ', 'urn: schemas-microsoft-com: PES ypes ');
T_Node = t_XMLDOM.createElement ('data ');
T_Node.dataType = 'bin. base64 ';
T_Node.nodeTypedValue = g_Stream.Read (g_BlockSize );
T_Attribute = t_XMLDOM.createAttribute ('upfiletype ');
T_Attribute.value = g_UpFileType;
T_Node.setAttributeNode (t_Attribute );
T_Attribute = t_XMLDOM.createAttribute ('fileindex ');
T_Attribute.value = g_SendCount;
T_Node.setAttributeNode (t_Attribute );
T_Attribute = t_XMLDOM.createAttribute ('totalcount ');
T_Attribute.value = g_TotalCount;
T_Node.setAttributeNode (t_Attribute );
T_Attribute = t_XMLDOM.createAttribute ('filesize ');
T_Attribute.value = g_FileSize;
T_Node.setAttributeNode (t_Attribute );
T_Attribute = t_XMLDOM.createAttribute ('blocksize ');
T_Attribute.value = g_BlockSize;
T_Node.setAttributeNode (t_Attribute );
T_Attribute = t_XMLDOM.createAttribute ('fileextname ');
T_Attribute.value = fileExtName;
T_Node.setAttributeNode (t_Attribute );
T_Root.appendChild (t_Node );
G_XMLHttp = new ActiveXObject ('Microsoft. xmlhttp ');
G_XMLHttp.open ('post', 'acceptfile. aspx ', true );
G_XMLHttp.onreadystatechange = XMLHttpStateChange;
G_XMLHttp.send (t_XMLDOM );
If (g_guageFlag) {MoveGuage ();}
}
Else
{
Var xx = spider. BookFile. FileObj. getFileName ();
Alert (xx. value );
Document. all. lblLeavingsTime. innerText = '0 second ';
CloseWindow (document. all. Close close );
Document. all. returnInfo. innerText = 'the file has been uploaded! ';
}
}
Function XMLHttpStateChange ()
{
If (g_XMLHttp.readyState = 4)
{
Var rstr = g_XMLHttp.responseText;
If (rstr = 'OK ')
{
G_SendCount ++;
SendData ();
}
Else
{
Document. all. returnInfo. innerText = rstr;
CloseWindow (document. all. Close close );
}
}
}
Function CloseWindow (p_OBJ)
{
G_PauseFlag = true;
G_Stream.Close ();
}
Accept. aspx
Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "AcceptFile. aspx. cs" Inherits = "commonJS_AcceptFile" %>
Accept. aspx. csCopy codeThe Code is as follows: using System;
Using System. Data;
Using System. Configuration;
Using System. Collections;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Web. UI. HtmlControls;
Using System. Xml;
Using System. IO;
Using spider. BookFile; // This is a file class written by yourself.
Public partial class commonJS_AcceptFile: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
AjaxPro. Utility. RegisterTypeForAjax (typeof (FileObj ));
XmlDocument t_XmlDocument = new XmlDocument ();
T_XmlDocument.Load (this. Request. InputStream );
XmlNode t_XmlNode = t_XmlDocument.SelectSingleNode ("Root/Data ");
FileObj t_FileOBJ = new FileObj ();
String t_upfiletype = t_XmlNode.Attributes ["upfiletype"]. Value;
String t_FileIndex = t_XmlNode.Attributes ["fileindex"]. Value;
String t_totalcount = t_XmlNode.Attributes ["totalcount"]. Value;
String t_filesize = t_XmlNode.Attributes ["filesize"]. Value;
String t_blocksize = t_XmlNode.Attributes ["blocksize"]. Value;
String t_fileextname = t_XmlNode.Attributes ["fileextname"]. Value;
Byte [] t_File = Convert. FromBase64String (t_XmlNode.FirstChild.Value );
FileObj. upfile myUpFile = new FileObj. upfile ();
MyUpFile. FileCount = t_totalcount;
MyUpFile. FileIndex = t_FileIndex;
MyUpFile. UpFileType = t_upfiletype;
MyUpFile. FileSize = t_filesize;
MyUpFile. BlockSize = t_blocksize;
MyUpFile. ExtName = t_fileextname;
MyUpFile. t_File = t_File;
FileObj. InsertFileList (myUpFile );
If (FileObj. getErrMsg = "")
{
This. Response. Write ("OK ");
}
Else
{
This. Response. Write (FileObj. getErrMsg );
}
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
