The system would have been very complicated, but after analyzing each part clearly, the technology needed was not high. However, when I put all the functional functions in preparation for encapsulation, I found it is not easy to encapsulate the program, because the program and HTML coupling is too high. Then I step through the process of operating HTML-related parts of the separation, first to the simple separation, followed by the file list, then the files control, and finally some of the prompt program. After several attempts, the whole structure was encapsulated.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Imitation 163 network disk No refresh file upload system </title> </pead> <body> <style>. fu_list { width:600px; Background: #ebebeb; font-size:12px; }. fu_list td {PADDING:5PX; line-height:20px; Background-color: #fff; }. fu_list table {width:100%; border:1px solid #ebebeb; }. Fu_list thead td {Background-color: #f4f4f4; }. fu_list B {font-size:14px; }/*file Container Style * * A.files {width:90px; height:30px; Overflow:hidden; Display:block; border:1px solid #BEBEBE; Background:url (/attachment.php?aid=8332&noupdate=yes) left top no-repeat; Text-decoration:none; } a.files:hover {background-color: #FFFFEE; Background-position:0 -30px; /*file is set to transparent and covers the entire touch/a.files input {margin-left:-350px; font-size:30px; Cursor:pointer; Filter:alpha (opacity=0); opacity:0; /* * When the click of the Dotted Line box * * a.files, a.files input {outline:none;/*ff*/hide-focus:expression (this.hidefocus=true); ;/style> <form id= "Uploadform" action= "File.ashx" > <table border= "0" cellspacing= "1" class= "Fu_list" > & lt;thead> <tr> <td colspan= "2" ><b> uploading files </b></td> </tr> </thead> <tbod y> <tr> <td align= "right" width= "15%" > Add File:</td> <td> </td> </tr> <tr> <TD colspan= "2" ><table border= "0" cellspacing= "0" > <thead> <tr> <td> file path </td> TD width= "M" ></td> </tr> </thead> <tbody id= "idfilelist" > </tbody> </table> </td> </tr> <tr> <td colspan= "2" > Warm tip: Up to the same time upload <b id= "Idlimit" ></b> files, only allowed to upload <b Id= "Idext" ></b> documents. </td> </tr> <tr> <TD colspan= "2" align= "center" id= "idmsg" ><input type= "button" value= "Started uploading" id= "Idbtnupload" disabled= " Disabled "/> <input type=" button "value=" All Canceled "id=" Idbtndel "disabled=" disabled "/> </td > </tr> </tbody> </table> </form> <script type= "Text/javascript" > var Isie = (docum Ent.all)? True:false; var $ = function (ID) {return "string" = = typeof ID? document.getElementById (ID): ID; }; var Class = {Create:function () {return function () {this.initialize.apply (this, arguments); }} var Extend = function (destination, source) {for (var property in source) {Destination[property] = Source[prop Erty]; The var Bind = function (object, fun) {return function () {return Fun.apply (object, arguments); The var each = function (list, fun) {for (var i = 0, len = list.length i < len; i++) {Fun (list[i], i);} }; File Upload class var fileupload = Class.create (); Fileupload.prototype = {//form object, fileControl holds space Initialize:function (form, folder, options) {this. Form = $ (form);//form this. Folder = $ (folder);//file control storage space this. Files = [];//file collection this. SetOptions (options); This. FileName = This.options.FileName; This._framename = This.options.FrameName; This. Limit = This.options.Limit; This. DISTINCT =!! this.options.Distinct; This. Extin = This.options.ExtIn; This. Extout = This.options.ExtOut; This.oninifile = This.options.onIniFile; This.onempty = This.options.onEmpty; This.onnotextin = This.options.onNotExtIn; This.onextout = This.options.onExtOut; This.onlimite = This.options.onLimite; This.onsame = This.options.onSame; This.onfail = This.options.onFail; This.onini = This.options.onIni; if (!this._framename) {//Create a different iframe for each instance this._framename = "Uploadframe_" + Math.floor (Math.random () * 1000); IE cannot modify the IFRAME's name var oframe = Isie? Document.createelement ("<iframe name=\" "+ this._framename +" \ ">"): Document.createelement ("iframe"); Set name Oframe.name = t for FFHis._framename; OFrame.style.display = "None"; In the IE document is not loaded with AppendChild will be an error Document.body.insertBefore (Oframe, document.body.childnodes[0]); //Set the form property, the key is target to point to iframe this. Form.target = This._framename; This. Form.method = "POST"; Note that the IE form does not have enctype attribute, use encoding this. form.encoding = "Multipart/form-data"; Tidy this up once. Ini (); },//Set default properties Setoptions:function (options) {this.options = {//default value FileName: "",//File upload control name, with background use framename: "",//i The name of the frame, to customize the IFRAME. This setting name Oninifile:function () {},//When the file is being sorted (where the parameter is a file object) Onempty:function () {},//null value limit:0,//the number of file limits, 0 is not limited to onlimite:function () {},//when exceeding the number of files limit execution distinct:true,//does not allow the same file Onsame:function () {},//have the same file Extin: [],//allow suffix name onnotextin:function () {},//not allow suffix name to execute extout: [],//prohibit suffix name, extin invalid Extout () when set Onextout:function () {}, is the execution of the onfail:function () {},//file when the suffix name is forbidden (where the parameter is a file object) Onini:function () {}//the reset); Extend (this.options, Options | | {}); },//Organize space ini:function () {//Organize file collection this. FilES = []; Organize the file space and put the value file into the collection of files each (this. Folder.getelementsbytagname ("input"), Bind (this, function (o) {if (O.type = = "File") {O.value && this. Files.push (o); This.oninifile (o); })//Inserts a new file var file = document.createelement ("input"); File.name = this. FileName; File.type = "File"; File.onchange = Bind (this, function () {this. Check (file); This. Ini (); }); This. Folder.appendchild (file); Execute additional program This.onini (); ///Detect the File object Check:function (file) {//detect variable var bcheck = true; Null value, file number limit, suffix name, same file detection if (!file.value) {bcheck = false; This.onempty (); else if (this. Limit && this. Files.length >= this. Limit) {bcheck = false; This.onlimite (); else if (!! This. Extin.length &&! REGEXP ("\." + this. Extin.join ("|") + ") $", "I"). Test (File.value) {//detect whether to allow suffix name bcheck = false; This.onnotextin (); else if (!! This. Extout.length && RegExp ("\." + this. Extout.join ("|") + ") $", "I"). Test (File.value) {//detect whether to prohibit suffix name bcheck = false; This.onextout ();else if (!! This. DISTINCT) {each (this. Files, Function (o) {if (O.value = = file.value) {bcheck = false;}}) if (!bcheck) {this.onsame ();} ///No Pass detection!bcheck && this.onfail (file); ///Remove the specified file delete:function (file) {//Remove the specified file this. Folder.removechild (file); This. Ini (); ///Delete all file Clear:function () {//Empty the files space each of this. Files, Bind (this, function (o) {this. Folder.removechild (o); })); This. Ini (); } var fu = new FileUpload ("Uploadform", "Idfile", {limit:3, extin: ["JPG", "gif"], oninifile:function (file) {file. Value? File.style.display = "None": this. Folder.removechild (file); Onempty:function () {alert ("Please select a file");}, Onlimite:function () {alert ("exceeds upload limit"), Onsame:function () {alert ("already has the same Document "); Onnotextin:function () {alert ("Allow upload only" + this.) Extin.join (",") + "file"); }, Onfail:function (file) {this. Folder.removechild (file); }, Onini:function () {//Show file list var arrrows = []; if (this. Files.length) {var othis = this; Each (this. Files, Function (o){var a = document.createelement ("a"); a.innerhtml = "Cancel"; a.href = "javascript:void (0);"; A.onclick = function () {othis.delete (o); return false;}; Arrrows.push ([O.value, A]); }); else {Arrrows.push (["<font color= ' Gray ' > did not add File </font>", " "]);} Addlist (arrrows); Set button $ ("Idbtnupload"). Disabled = $ ("Idbtndel"). Disabled = this. Files.length <= 0; } }); $ ("Idbtnupload"). onclick = function () {///Display file list var arrrows = []; Each (FU. Files, Function (o) {Arrrows.push ([O.value, " "]); Addlist (arrrows); Fu. Folder.style.display = "None"; $ ("idprocess"). Style.display = ""; $ ("idmsg"). InnerHTML = "The file is being added to your network, please wait ... It is possible that due to network problems, there is a long time no response to the program, please click "<font color= ' Red ' > Cancel </font>" Upload file "; Fu. Form.submit (); Tfragment (); Save the list with document fragments each (rows, function (cells) {var row = document.createelement ("tr"); Each (cells, function (o) {VAr cell = document.createelement ("TD"); if (typeof o = = "string") {cell.innerhtml = O;} else{cell.appendchild (o);} Row.appendchild (cell); }); Ofragment.appendchild (row); })//ie table does not support innerHTML so empty the table while (Filelist.haschildnodes ()) {filelist.removechild (filelist.firstchild);} Filelist.appendchild (ofragment); } $ ("Idlimit"). InnerHTML = Fu. Limit; $ ("Idext"). InnerHTML = Fu. Extin.join (","); $ ("Idbtndel"). onclick = function () {Fu. Clear (); (//////In the background through the window.parent to access the main Page functions function Finish (msg) {alert (msg); location.href = Location.href;} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Online Demo http://img.jb51.net/online/FileUpload/FileUpload.htm
Packaged file Download Http://xiazai.jb51.net/200810/yuanma/FileUpload.rar
