"Instance Name"
JS implementation file Upload one-time completion
"Instance description"
The default HTML control file can upload files, but must go through the selection file and click the Upload button two steps. This example learns how to implement one-step upload file operation.
Example
The code is as follows |
Copy Code |
<title> Title page-Learning Worry-free (www.111cn.net) </title> <body> <input id= "myfile" type= "file" style= "Display:none" Onpropertychange= "document.getElementById (' filename '). Innertext=this.value "/> <a href= "Javascript:document.getElementById" (' MyFile '). Click () > Browse ...</a> <br/> <span id= "filename" ></span> </body>
|
Effect
"Analysis of the difficulties"
This example hides the file control and then uses the "href" property of the A label to call the file control's "click" method to implement a selection of files. When a file is selected, triggers the "Onpropertychange" event of the file control in which to complete the upload file name.
But found compatibility bad.
The code is as follows |
Copy Code |
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <style type= "Text/css" > . _box { position:relative; width:119px; height:37px; Background-color: #53AD3F; Background-image:url (images/bg.png); Background-repeat:no-repeat; background-position:0 0; Background-attachment:scroll; line-height:37px; Text-align:center; Color:white; Cursor:pointer; Overflow:hidden; Z-index:1; } . _box Input { Position:absolute; width:119px; height:40px; line-height:40px; font-size:23px; opacity:0; Filter: "Alpha (opacity=0)"; Filter:alpha (opacity=0); -moz-opacity:0; Left: -5px; Top: -2px; Cursor:pointer; Z-index:2; } </style> <TITLE>JS implement input File file upload/></title> <body> <form id= "Form1" runat= "Server" method= "POST" enctype= "Multipart/form-data" > <div> <div class= "_box" > <input type= "File" Name= "_f" id= "_f"/> Select picture </div> </div> </form> </body> |
Next, we recommend a jquery file upload control is very useful
jquery Plugin Ajaxfileupload can implement Ajax file upload , need jquery library files and ajaxfileupload.js
I. INTRODUCTION part
The code is as follows |
Copy Code |
<script type= "Text/javascript" src= "Jquery.js" ></script> <script type= "Text/javascript" src= "Ajaxfileupload.js" ></script> |
Two .<body> parts
The code is as follows |
Copy Code |
<input type= "File" id= "Touxiang" name= "photo" size= "a" onchange= "changimg ()"/>
|
Note: Uploading files using the Ajaxfileupload plugin does not require a form
The code is as follows |
Copy Code |
<form name= "form" action= "" method= "POST" enctype= "Multipart/form-data" > ...... Related HTML code ... </form> |
Three. js part
The code is as follows |
Copy Code |
function changimg () { $.ajaxfileupload ( { URL: ' xxx.action ',//uploading file's server Secureuri:false//Whether to enable secure commit DataType: ' text ',//data type Fileelementid: ' Touxiang ',//= File domain ID Processing function HTML as return value, status as execution state after commit success Success:function (Html,status) { }, Submit failed handler function Error:function (Html,status,e) {
} } ) } |
Four. Principle
Use the jquery selector to get the file path value in the Files File upload box, and then create an IFRAME dynamically, creating a new file box inside to provide post submission to the background. Finally, return the results to the foreground.