JavaScript for simple multi-file uploads

This upload function mainly uses the HTML5 new attribute Formdata, through the XMLHttpRequest object send to the server, supports the file multi-select and multiple choice, the file to be heavy, removes the selected file and so on

1. HTML code

      <div class= "Formtitle upLoad" > Attachment upload </div>        <div class= "Choosefile" style= "Height:auto;" >            <input type= "button" id= "uploadbtn" value= "Select File ..."/><input type= "button" id= "UploadFile" style= " Display:none; "value=" Upload file "/>            <input type=" file "id=" Uploadpicker "accept=" "style=" Display:none; " Multiple/>            <div>                <ul id= "checkfilelist" ></ul>            </div>       </div>

　　

2. JavaScript code

    var selectedfilelist = [];//selected file list var paramtaskid = "";//Request parameter var Succsesscount = 0;//Upload successful file number var Errorcoun t = 0;//Upload failed file number $ (function () {$ ("#uploadbtn"). Bind ("click", Function (e) {$ ("#uploadpicker"). Clic        K ();        });            $ ("#uploadpicker"). Bind ("Change", function () {///Bind file Select event var files = $ ("#uploadpicker"). Prop ("Files");                $.each (Files, function (index, item) {var Choisefile = $ ("#checkfileList >li");                    if (Choisefile.length > 0) {//File de-weight var count = 0;                            $.each (Choisefile, function (index1, item1) {if (Item.name = = Item1.innertext) {                        count++;                    }                    }); if (count = = 0) {if (Checkfilelength (Item.size)) {$ ("#checkfileList"). Append ("<li class=\" fileinfo\ ">" + item.name + "<a style=\" DisplAy:none; color:red;                            Margin-left:10px;\ "href=\" javascript:void (0) \ "onclick=\" removefile (this) \ "> Delete </a>" + "</li>");                            Selectedfilelist.push (item);                        Addmoushover ();                        }}} and else {if (Checkfilelength (item.size)) { $ ("#checkfileList"). Append ("<li class=\" fileinfo\ ">" + item.name + "<a style=\" display:none; color:red; margi                        N-left:10px;\ "href=\" javascript:void (0) \ "onclick=\" removefile (this) \ "> Delete </a>" + "</li>");                        Selectedfilelist.push (item);                    Addmoushover ();        }                }            });        });    Addmoushover ();    });  Determines whether the file exceeds the limit size function checkfilelength (fileLen) {if (FileLen > 4194304) {$.messager.alert ("hint",            "Upload file size cannot exceed 4M", "error");        return false;   } return true; }//Upload file function UploadFile () {if (selectedfilelist.length>0) {$.messager.progress ({        Title: "Hint", msg: "File Crosses ..."});            $.each (selectedfilelist, function (index, item) {debugger;            var dataform = new FormData ();            Dataform.append ("File", item);            var xmlhttp = null; if (window.            XMLHttpRequest) {//code for all new browsers xmlhttp = new XMLHttpRequest (); } else if (window.            ActiveXObject) {//code for IE5 and IE6 xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); } if (xmlhttp! = null) {Xmlhttp.open ("POST", "/project/projecttask/savefiles?")                Taskid= "+ Paramtaskid, True);                Xmlhttp.send (DataForm);            Xmlhttp.onreadystatechange = Callbackmethods;            } else {alert ("Your browser version is incompatible, please use a later version of the browser"); }
            Request Callback functions function Callbackmethods () {debugger;                        if (xmlhttp.readystate = = 4) {if (Xmlhttp.status = =) {succsesscount++; if ((Succsesscount + errorcount) = = Selectedfilelist.length) {if (Errorco Unt > 0) {$.messager.alert ("prompt", "Upload file complete," + Errorcount + "files due to too large upload failed.                            "," error ");                        } submitsuccess ();                            }} else {if (xmlhttp.status==500) {errorcount++;  if ((Succsesscount + errorcount) = = selectedfilelist.length) {if (errorcount>0) {$.messager.alert ("prompt", "Upload file complete," "+errorcount+" file failed because of too large upload.)                                "," error "); } submitsUccess ();        }                        }                    }                }            }        });        } else {submitsuccess ();            }}//Remove the selected file function RemoveFile (obj) {$.messager.confirm ("Prompt", "Confirm Delete current file?", function (e) {                if (e) {var index = $ ("#checkfileList >li"). Index (obj). parent ());                Selectedfilelist.splice (index, 1);            $ (obj). Parent (). remove ();    }        }); }
Add mouse past events, the mouse across the display "delete" function Addmoushover () {$ (". FileInfo"). Hover (function () {$ (this). Find ("a")        . Last (). CSS ("Display", "");        }, Function () {$ (this). Find ("a"). Last (). CSS ("display", "none");    }); }

3. Image display

JavaScript for simple multi-file uploads