IFRAME simulates Ajax multi-File Upload

Source: Internet
Author: User

<% @ Page Language = "C #" autoeventwireup = "true" codefile = "uploadfile. aspx. cs" inherits = "uploadfile" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
<SCRIPT src = "resource/jquery/jquery-1.4.1.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Jquery. Extend ({
Createuploadiframe: function (ID, Uri ){
// Create Frame
VaR frameid = "uploadframe ";
If (ID! = Undefined & ID! = ""){
Frameid = ID;
}
If (window. activexobject ){
VaR IO = Document. createelement ('<IFRAME id = "' + frameid + '" name = "' + frameid + '"/> ');
If (typeof uri = 'boolean '){
Io. src = 'javascript: false ';
} Else if (typeof uri = 'string '){
Io. src = URI;
}
} Else {
VaR IO = Document. createelement ('iframe ');
Io. ID = frameid;
Io. Name = frameid;
Io. src = URI;
}
Io. style. Position = 'absolute ';
Io. style. Top = '-1000px ';
Io. style. Left = '-1000px ';
Document. Body. appendchild (IO );
Return Io
},
Createuploadform: function (ID, Uri ){
// Create form
VaR formid = "uploadform ";
If (ID! = Undefined & ID! = ""){
Formid = ID;
}
VaR form = $ ('<form action = "' + URI + '" method = "Post" name = "' + formid + '" id = "' + formid + '" enctype = "multipart/form-Data"> </form> ');

// Set form attributes
Parameters (form).css ('position', 'absolute ');
((Form).css ('top', '500px ');
Optional (form).css ('left', '100px ');
$ (Form). appendto ('body ');

Return form;
},
Clonefilestocreatedform: function (oldformid, createdformid ){
VaR form = $ ("#" + createdformid );
$ ("#" + Oldformid + "input [type = file]"). Each (function (I ){
// Clone each file and append the old file control to the created form.
// Reset newid, new name and append old file control to the created form that only for fix ie bug.

Alert ("ID:" + $ (this). ATTR ("ID") + "name:" + $ (this). ATTR ("name "));
VaR newid = (new date (). gettime (). tostring ();
VaR clonefile = $ (this). Clone ();
$ (Clonefile). ATTR ('id', newid );
$ (Clonefile). ATTR ('name', newid );
$ (This). Before (clonefile );
Alert ('1 ');
$ (This). appendto (form );
Alert ("ID:" + $ (this). ATTR ("ID") + "name:" + $ (this). ATTR ("name "));
});
},
Iframeuploadfiles: function (s ){
// Todo introduce global settings, allowing the client to modify them for all requests
S = jquery. Extend ({}, jquery. ajaxsettings, S );
// Get ID for create form and IFRAME.
VaR id = new date (). gettime ();
VaR frameid = 'uploadframe '+ ID;
VaR formid = 'uploadform' + ID;

VaR form = jquery. createuploadform (formid, S. url );
VaR frame = jquery. createuploadiframe (frameid, S. secureuri );

If (S. defaultform! = Undefined & S. defaultform! = ""){
Jquery. clonefilestocreatedform (S. defaultform, formid );
}

// Submit the form.
Try {
$ (Form). ATTR ('action', S. url );
$ (Form). ATTR ('method', 'post ');
$ (Form). ATTR ('target', frameid );
If (Form. Encoding ){
Form. Encoding = 'multipart/form-data ';
} Else {
Form. enctype = 'multipart/form-data ';
}
$ (Form). Submit ();
} Catch (e ){
Alert ('upload files happened error! ');
}
}
});
</SCRIPT>
<SCRIPT type = "text/JavaScript">
Function uploadallfiles (){
$. Iframeuploadfiles ({
URL: 'uploadfilehandler. ashx ',
Defaultform: 'form1 ',
Secureuri: false
})
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Div id = "uploadfileswrapper" style = "border: solid 1px #369;">
<P class = "uploadfile">
<Input type = "button" value = "add" style = "width: 100px; Height: 30px;" onclick = "AddFile ('uploadfileswrapper')"/>
<Input type = "button" id = "buttonupload" style = "width: 100px; Height: 30px;" value = "Upload" onclick = "uploadallfiles ()"/>
</P>
<P>
<Input id = "uploadfiledefault" type = "file" size = "50" name = "uploadfiledefault"/>
</P>
<P>
<Input type = "button" onclick = "getfilename ($ ('# filetoupload')" value = "Get file path"/>
<Input type = "button" onclick = "removefilepath ($ ('# filetoupload')" value = "Remove file path"/>
</P>
<Input type = "Submit" value = "Submit to current form"/>
<Input type = "text" name = "tst1"/>
<Input type = "radio" name = "tst2"/>
</Div>
</Div>
</Form>
<Div id = "ajaxmsg"> </div>
<SCRIPT type = "text/JavaScript">
// Show upload files result
Function showmessageforuploadfile (MSG ){
$ ("# Ajaxmsg" cmd.html (MSG );
}

// Get Upload File name by path.
Function getfilenamebypath (PATH ){
// Get path
If (Path = undefined | Path = ""){
Return "";
} Else {
VaR Index = path. lastindexof ("\\");
If (index> 0 ){
Return Path. substring (index + 1, path. Length );
} Else {
Return path;
}
}
}

// Create input of File
Function AddFile (target ){
// Create input type = 'file'
VaR filename = (new date (). gettime ();
VaR P = Document. createelement ("p ");
Var file = Document. createelement ("input ");

File. setattribute ("type", "file ")
File. setattribute ("name", filename)
File. setattribute ("ID", filename );
File. setattribute ("size", "50 ")
P. appendchild (file)

VaR button = Document. createelement ("input ");
Button. setattribute ("type", "button ");
Button. setattribute ("value", "Remove ")
$ (Button). Click (function (){
Removeeachfile (this)
});
P. appendchild (button );
Document. getelementbyid (target). appendchild (P );
}

// Remove the each file container with file input
Function removeeachfile (o ){
While (O. tagname! = "P "){
O = O. parentnode;
}

O. parentnode. removechild (O );
}

// Removed value of file contorl
Function removefilepath (OBJ ){
VaR objfile = $ (OBJ) [0];
Objfile. outerhtml = objfile. outerhtml. Replace (/(value = \ "). + \"/I, "$1 \"");
}

// Get
Function getfilename (o ){
VaR name = getfilenamebypath ($ (O). Val ());
}

</SCRIPT>
</Body>
</Html>

 

// Ashx

 

<% @ Webhandler Language = "C #" class = "uploadfilehandler" %>

Using system;
Using system. Web;

Public class uploadfilehandler: ihttphandler {

Public void processrequest (httpcontext context)
{
Httprequest request = context. request;
Httpresponse response = context. response;
Httpserverutility Server = context. server;
// Specify the output header and encoding
Response. contenttype = "text/html ";
Response. charset = "UTF-8 ";
Httpfilecollection fileconnection = request. files;
Foreach (string ctlname in fileconnection)
{
// Obtain the uploaded file
String newfilename = guid. newguid (). tostring ();

Httppostedfile file = fileconnection [ctlname];
// Use guid to generate a new file name
If (file. filename = "")
{
// File not uploaded
// Response. Write ("<SCRIPT> parent. showmessageforuploadfile (''); </SCRIPT> ");
}
// Output Js. Use the parent object to obtain the reference of the parent page.
Else
{
// Save the file
Newfilename + = system. Io. Path. getextension (file. filename); // Add the extension.
Try
{
File. saveas (server. mappath ("~ /Uploadfiles/"+ newfilename ));
// Response. Write ("<SCRIPT> parent. showmessageforuploadfile ('upload file success. ') </SCRIPT> ");
}
Catch
{
// Response. Write ("<SCRIPT> alert ('failed to save the file! \ N check whether the folder has write permission! '); </SCRIPT> ");
}
}
}

Response. Write ("<SCRIPT> parent. showmessageforuploadfile ('upload file success. ') </SCRIPT> ");
}
 
Public bool isreusable {
Get {
Return false;
}
}

}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.