I thought this system would be very complicated, but after analyzing each part clearly, the technology needed is not very high. However, when I sorted out all functional functions and prepared them for encapsulation, I found that it was not that easy to encapsulate the program because the coupling between the program and html was too high. Then, I gradually separated the html-related operations in the program. First, I separated the simple operations, followed by the file list, followed by the file control, and finally some suggestive programs. The entire structure is encapsulated only after several attempts.
<! 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> copy 163 Network Disk without refreshing new 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 # ebeb ;}. fu_list thead td {background-color: # f4f4f4 ;}. fu_list B {font-size: 14px;}/* file container style */. 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;}. files: hover {background-color: # FFFFEE; background-position: 0-30px;}/* set file to transparent and overwrite the entire trigger surface */. files input {margin-left:-350px; font-size: 30px; cursor: pointer; filter: alpha (opacity = 0); opacity: 0 ;} /* unclick the dotted box */. files,. files input {outline: none;/* ff */hide-focus: expression (this. hideFocus = true);/* ie */} </style> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Online Demo http://img.jb51.net/online/FileUpload/FileUpload.htm
Package File Download http://xiazai.jb51.net/200810/yuanma/FileUpload.rar