Html:
<Div>Photo:<Div> <inputonchange= "firstimg ()"name= "Firstimg"style= "Opacity:0;position:absolute"type= "File"ID= "Firstfileimg"multiple=""> <DivPosition:absolute=""> <span>Click here to upload a picture</span> </Div> </Div> </Div> <fieldsetstyle= "width:100%;"> <!--<legend> picture Preview </legend> - <Divstyle= "position:relative;"ID= "CCC"> </Div> </fieldset>
Js:
<script>Jquery.duoimgsyulan=function(file, id) { for(vari = 0; I < 3; i++) { if(!/image\/\w+/. Test (File[i].type)) {Alert ("Please select Picture file"); return false; } if(File[i].size > 2048 * 1024) {alert ("Picture cannot be greater than 2MB"); Continue; } varimg; Console.log (document.getElementById ("Fileimg")); Console.log (File[i]); Console.log ("File-size=" +file[i].size); varReader =NewFileReader (); Reader.onloadstart=function(e) {Console.log ("Start reading ...."); } reader.onprogress=function(e) {Console.log ("Reading in progress ...."); } reader.onabort=function(e) {Console.log ("Interrupt read ...."); } reader.onerror=function(e) {Console.log ("Read exception ...."); } reader.onload=function(e) {Console.log ("Read successfully ...."); vardiv = document.createelement ("div");//Outer DivDiv.setattribute ("Style", "Position:relative;width:90px;height:90px;float:left;z-index:2;width:92px;margin-left : 8px; "); vardel = document.createelement ("div");//Delete button divDel.setattribute ("Style", "Position:absolute; bottom:4px; right:0px; z-index:99; width:19px; height:18px;border-radius:50%; ") varDelicon = document.createelement ("img"); Delicon.setattribute ("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png"); Delicon.setattribute ("title", "Delete"); Delicon.setattribute ("Style", "cursor:pointer;width:20px; height:20px "); Del.onclick=function() { This. ParentNode.parentNode.removeChild ( This. parentelement); Clearfirtsimg (); }; Del.appendchild (Delicon); Div.appendchild (DEL); varIMGs = document.createelement ("img");//uploaded Images varinput = document.createelement ("input");//uploaded ImagesInput.setattribute ("name", "imgs[")); Input.setattribute ("Value", E.target.result); Input.setattribute ("Style", ' Display:none '); Imgs.setattribute ("Name", "loadimgs[]"); Imgs.setattribute ("SRC", E.target.result); Imgs.setattribute ("Width", 90); if(document.getElementById (ID). childnodes.length > 5) {document.getElementById (id). removechild (document.getElementById (ID). firstchild); } div.appendchild (IMGs) div.appendchild (input) document.getElementById (ID). appendchild (di V); } reader.readasdataurl (File[i]); }}functionfirstimg () {$. Duoimgsyulan (document.getElementById ("Firstfileimg"). Files, "CCC");}functionclearfirtsimg () {varFile = $ ("#FirstfileImg") File.after (File.clone (). Val ("")); File.remove ();}</script>
Ajax:
$ (' #submit '). Click (function(){ varFormData =NewFormData ($ ("#form") [0]); varURL =URL; $.ajax ({type:' Post ', Url:url, Data:formdata, cache:false, ContentType:false, ProcessData:false, Success:function(data) {//if (data.status==1) { //success (data); //}else{ //error (data); // } } }); });
PHP receives multiple images base64