Javascript file upload class

File Upload is often used during website development. Therefore, I specially sorted out

JS class, this class completes the front-end work of the upload. You must use the language you are familiar with to create a background page as a response.

I will also give the Asp.net background as an example.

// File Upload class
// Prepared by: oyster

// The passed parameter is: element: the response control. In order to locate the uploaded control under the control of the response, it is similar to the drop-down box.

// Fmsrc: the address of the background response page. please note the following: background page introduction.
VaR LoadFile = function (element, fmsrc)
{
This. Ele = element;
This. Ele. Up = this;
This. viewstr = "<Div style =/" width: 300px; Height: 80px; Z-index: 99; Background-color: White; text-align: center; border-top: 1px black solid ;"
This. viewstr + = "border-bottom: 1px black solid; border-left: 1px black solid; border-Right: 1px black solid;/"> ";
This. viewstr + = "<div> <span> file title </span> </div> ";
This. viewstr + = "<div> <span> file address </span> </div> ";
This. viewstr + = "<div> <Div style =/" width: 100px; float: Left;/"> </div> <Div style =/" width: 100px; float: left;/"> </div> ";
This. viewstr + = "<Div style =/" width: 100px; float: Left;/"> </div> ";
This. viewstr + = "</div> ";
This. view = Document. createelement ("Div ");
This. View. style. Position = "absolute ";
This. View. innerhtml = This. viewstr;
This. View. style. Display = "NONE ";

This. Frame = Document. createelement ("IFRAME ");
This. Frame. src = fmsrc;
This. Frame. style. width = "10px ";
This. Frame. style. Height = "10px ";
This. Frame. style. Position = "absolute ";
This. Frame. style. Top = "-100px ";
This. Frame. OBJ = this;
This. Frame. onreadystatechange = function ()
{
If (this. readystate = "complete ")
{
VaR FS = (this. obj. Frame. Document | this. obj. Frame. contentdocument). Body. getelementsbytagname ("Input ");
VaR F1 = {};
For (VAR I = 0; I <fs. length; I ++ ){
If (FS [I]. type = "file ")
F1 = FS [I]
}
If (f1.url! = NULL)
{
This. obj. fileurl = f1.url;
This. obj. filename = This. obj. Title. value = ""?" Attachment ": This. obj. Title. value;
Alert ("upload successful !");
This. obj. savedfuc ();
}
}
}

This. Title = Document. createelement ("Input ");
This. Title. type = "text ";
This. Title. style. width = "230px ";
This. View. firstchild. firstchild. appendchild (this. Title );

This. Path = Document. createelement ("Input ");
This. Path. type = "text ";
This. Path. style. width = "230px ";
This. Path. readonly = true;
This. View. firstchild. childnodes [1]. appendchild (this. Path );

This. btnup = Document. createelement ("Input ");
This. btnup. type = "button ";
This. btnup. value = "Upload ";
This. btnup. OBJ = this;
This. btnup. onclick = function ()
{
If (this. obj. Frame. Document | this. obj. Frame. contentdocument). Forms [0]) {
(This. obj. Frame. Document | this. obj. Frame. contentdocument). Forms [0]. Submit ();
} Else {
Alert ('error: Upload initialization failed! ');
}
}
This. View. firstchild. childnodes [2]. childnodes [0]. appendchild (this. btnup );

This. btnclose = Document. createelement ("Input ");
This. btnclose. type = "button ";
This. btnclose. value = "close ";
This. btnclose. OBJ = this;
This. btnclose. onclick = function ()
{
This. obj. View. style. Display = "NONE ";
}
This. View. firstchild. childnodes [2]. childnodes [1]. appendchild (this. btnclose );

This. btnlook = Document. createelement ("Input ");
This. btnlook. type = "button ";
This. btnlook. value = "...";
This. btnlook. OBJ = this;
This. btnlook. onclick = function (){
VaR FS = (this. obj. Frame. Document | this. obj. Frame. contentdocument). Body. getelementsbytagname ("Input ");
VaR F1 = {};
For (VAR I = 0; I <fs. length; I ++ ){
If (FS [I]. type = "file ")
F1 = FS [I]
}
F1.click ()
This. obj. Path. value = f1.value;
VaR tit = This. obj. title;
F1.value. Replace (// (/w | [/u4e00-/u9fff]) +/./W + $/, function ($0 ){
Tit. value = $0. substr (1, $0. Length-1 );
}
);
}
This. View. firstchild. childnodes [2]. childnodes [2]. appendchild (this. btnlook );

This. savedfuc = function ()
{
// The saved function, usually used to update the information of the uploaded attachment.
}
Document. Body. appendchild (this. Frame );
Document. Body. appendchild (this. View );
This. Show = function ()
{
VaR Pt = getpositionxy (this. Ele );
This. View. style. Top = pt. Y + 15 + "PX ";
This. View. style. Left = pt. x-80 + "PX"
This. View. style. Display = "block ";
This. View. Focus ();
}
}
// Obtain the absolute position of the control
Function getpositionxy (OBJ)
{
VaR Pt = {"x": 0, "y": 0 };
VaR temp = OBJ;
While (true ){
If (temp! = NULL ){
PT. x + = temp. offsetleft;
PT. Y + = temp. offsettop;
If (temp! = Document. Body ){
Temp = temp. offsetparent;
} Else {
Break;
}
} Else {
Break;
}
}
Return pt;
}

------------

Background response page:

HTML:

<HTML xmlns = "http://www.w3.org/5o/xhtml">
<Head runat = "server">
<Title> upload a file </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Input id = "fileupdate" name = "fileupdate" type = "file" runat = "server"/>
</Div>
</Form>
</Body>
</Html>

That's simple.

Background:

These static classes are not necessary, but other pages of my project need to be known, and all are reserved.

Public static string uploadfilepath = "uploads ";
Public static string errmsg = string. empty;
Public static string lastuppath = string. empty;
Public static string lastupurl = string. empty;
Protected void page_load (Object sender, eventargs E)
{
Try
{
If (ispostback)
{
If (fileupdate. postedfile! = NULL & fileupdate. postedfile. contentlength> 0)
{
Uploadfilepath = uploadfilepath. Equals (string. Empty )? "Uploads": uploadfilepath;
String vpsh = uploadfilepath + "/" + guid. newguid (). tostring () + system. Io. Path. getextension (fileupdate. postedfile. filename );
String PSH = mappath (vpsh );
If (! System. Io. Directory. exists (system. Io. Path. getdirectoryname (PSH )))
{
System. Io. Directory. createdirectory (system. Io. Path. getdirectoryname (PSH ));
}
Fileupdate. postedfile. saveas (PSH );
Lastuppath = PSH;
Lastupurl = fileupdate. attributes ["url"] = resolveorgurl (vpsh );
}
}
}
Catch (exception ee ){
Errmsg = ee. message;
}
}

/// Return the File URL
Public String resolveorgurl (string vpath)
{
Return request. url. scheme + ": //" + request. url. Host + ":" + request. url. Port + resolveurl (vpath );
}