Normal File Upload

Foreword I remember leaving the basic mailbox project team in March and entering the cloud Post Office Project Team, the leaders once told me to organize the email upload module into documents so that other colleagues can take over the documents. Due to various reasons, I have not started my work. Recently I have made up my mind to sort out my notes and record all the upload methods used in my mailbox. General upload processes include: normal upload, 139 email gadgets upload, flash upload, HTML5 upload (including drag-and-drop upload, multipart upload, resumable upload, and miaochuan: i. Application scenarios: normal upload is required for a single small file without the need to display the upload progress. II. Effects: No need to upload new files. III. Operation steps: step 1. Beautify native input type = 'file' early browsers require that you click input type = 'file' to bring up the file selection box (many modern browsers support binding click events for any dom Element, in the event processing program, call the click event of input type = 'file' to bring up the file selection box), but the default input is ugly. We can make a beautiful upload button, then, make the input type = 'file' transparent floating layer and hover it over the beautiful upload button. In this way, you can click the upload button to actually click input, which is compatible with all browsers, the file selection box is displayed.

Step 2. Prepare HTML code

<form target="_hideFrame_" enctype="multipart/form-data" method="post" action="http://appmail.mail.10086.cn/RmWeb/mail?func=attach:upload&sid=MTQwNzkzNDE2MDAwMTk2NTcwMTUzMQAA000005&composeId=0.5352626114618033&type=internal"> <input style="font-size:20px;position:absolute;right:0px;" type="file" name="uploadInput" id="uploadInput"> </form> <iframe name="_hideFrame_" style="display:none"></iframe>

 

Step 3. Prepare the script

VaR commoupload = {// Step 1. Bind The onchange event to type = 'file'. When the change event is triggered, submit the form. The target attribute of the form points to a hidden IFRAME initevents: function () {var this = This; $ ("input "). change (function () {If (! This. value) {return;} // verify the file var extname = This. getfileextname (this. value); if ($. inarray (extname, ["jpg", "Jpeg", "GIF", "BMP", "PNG"]) =-1) {alert ("only JPG can be inserted, "); form. reset (); return;} var form = This. form; var jframe = This. gethideframe (); try {form. submit (); form. reset (); // do not forget to call the reset method. Otherwise, the change event cannot be triggered when the file is selected for the second time.} catch (e) {jframe. ATTR ("src", "/m2012/html/blank.htm L "). load (function () {jframe. unbind ("LOAD", arguments. callee); form. submit (); form. reset () ;};}}) ;}, // Step 2. Create a hidden IFRAME and bind it to the onload event. When the load event is triggered, read the upload result gethideframe output by the server: function () {var this = This; var jframe = $ ("# _ hideframe _"); If (jframe. length = 0) {jframe = $ ('<IFRAME name = "_ hideframe _" style = "display: none"> </iframe> '). appendto (document. body ). load (function () {This. onuploadframeload (thi S) ;}) ;}return jframe ;}, // Step 3. parse the upload result and obtain the file path, file size, and other information to meet the echo image requirements. // For example: 139 after the local image is inserted into the mailbox editor and uploaded successfully, the server outputs the following message: // <SCRIPT> document. domain = Window. location. host. match (/[^.] + \. [^.] + $/) [0]; var return_obj = {'code':'s _ OK ', 'var': {"fileid": "1639109220557duesgqlnrq1", "FILENAME ": "img_1388.jpg", "filesize": 2183825 }}; </SCRIPT> onuploadframeload: function (FRAME) {try {var Doc = frame.content1_doc ument; var HT ML = Doc. body. innerhtml | doc.doc umentelement. innerhtml; // Response Message of the server after the todo resolution upload is successful} catch (e) {console. log ('function: onuploadframeload has a exception! ') ;}},/*** Get the lower-case file extension, without. no. * @ returns {string} */getfileextname: function (filename) {If (filename & filename. indexof (". ")>-1) {return filename. split (". "). pop (). tolowercase ();} return "";}};