I recently wrote a script uploaded by multiple pictures of web pages. It feels very practical, so don’t say the details, just post the code ~
<head> <style> .pro_img {margin-heft: 10px; margin-top: 10px; width: 300px; height: 300px; background-color: black; OW: Hidden; Float: left ; --Margin: 5%35%; Position: Relative;}. Pro_img img {position: absolute; left: 50%; TOP: 50%; transform: translate (-50%, -50%); Width: 100% } .pro_img {posity: related} .pro_img input {posity: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 100;} </STYLE > <Script Type = Text /javascript src = jquery.min.js> </script> <script> name_pic = 1; function t1 (o) {// alert (name_pic); if (o == 1 || name_pic! = 1) {var file = file+o; var IMG = IMG+O; VAR HID = Hidden+O; VAR AA = A+O;} Else {VAR FILE = FILE+name_pic; varg = img+name_pic; _pic; var aa = a+name_pic;} var docobj = document.GetelementByid (file); var IMGObjpreView = document.getelementByid (IMG); ENTBYID (HID); // Alert (Hidden); if (docobj.files && docobj.files [0]) {hidden.src = window.url.createObjecturl (docobj.files [0]); // The path to get the file file hidden.onload = Function () {Var Width = Hidden.w.w. idth; var Height = hidden.head; var a = document.GetelementByid (aa); if (width> height) {imgobjpreView.style.CSSttext = 'Width: 100%'; LSE {imgobjpreview.style.cstext = 'Height: 100%; width: Auto;';} ImgobjpreView.src = Window.url.CreateObjecturl (docobj.files [0]); imgobjpreView.display = 'Blo ck ';}} else {Return false;} if (o == name_pic) {var count = $ ('. Pro_img'). Length; if (count <6) {name_pic ++; var pic_div = <a class = 'pro_img' id = 'a+name_pi_pi C+'> <input Type = 'File' ID = 'File+name_pic+' Accept = 'Image/*' Multiple = 'Multiple' name = 'Pic [] onChange =' T1 (+name_pic+) '/> <i mg src = 'upload.jpg 'ID =' IMG+NAME_PIC+'> </a> <IMG ID =' Hidden+Name_pic+'STYLE =' Display: None; '>; $ ('#upload '). } </ Script> </Head> <!-Multiple = 'Multiple'-> <FORM ACTION = HTTP: //192.168.0.7/index.php/pic/upload Enctype = Multipart/Form-Data D = POST> <div ID = 'Upload'> <A Class = 'Pro_img' ID = 'A1'> <input Type = 'File' ID = 'File1' Accept = 'Image/*' Multiple = 'Multiple' Na me = 'pic [ ] 'Onchange =' T1 (1) '/> <IMG SRC =' Upload.jpg 'ID =' IMG1 '> </a> <IMG ID =' Hidden1 'STYLE =' Display: None; </Div > <input type = 'Submit' value = upload/> </form>Replace some of upload.png by yourself, you can meet your own needs. If you say that the picture click does not respond, don't forget to join jQuery
The above is the preview function of HTML -based implementation of HTML. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!