Select multiple input images and displays, and select multiple input images for display.

Select multiple input images and displays, and select multiple input images for display.

Input tag

When using input to select a file, only the last file is displayed during traversal of input file. files. The modification is as follows:

 

CSS:

<Style type = "text/css">
# View {}
# View {}. imgbox {float: left; position: relative; width: 100px; height: 100px; margin-left: 10px; margin-top: 10px;
Padding: 5px; border: solid 1px red; border-radius: 5px ;;}
# View {}. imgbox. close {border: solid 1px red; position: absolute; top:-15px;
Width: 20px; height: 20px; display: inherit; cursor: pointer; text-align: center; background: red; color: # fff; right:-10px; z-index: 20; border-radius: 100% ;}
# View {}. imgbox input {width: 100%; height: 100%; z-index: 10 ;}
</Style>

 

Html:

<Input type = "file" onchange = "load (this)" multiple = "multiple" accept = "image/*" class = 'myfile'> </input>

<Div id = "view"> </div>

JS:

<Script>
$ ('Body'). on ('click', '. close', function (){
$ (This). parent ('. imgbox'). remove ();
});

Function load (file ){
Var num = 1;
If (file. files ){
For (var I = 0; I <file. files. length; I ++ ){
Var reader = new FileReader ();
Reader. readAsDataURL (file. files [I]);
Reader. onload = function (evt ){
Var imgbox =$ ('<div> </div> ');
Imgbox. addClass ('imgbox ');
$ ('# View'). append (imgbox );

Var close = $ ('<div> & times; </div> ');
Close. addClass ('close ');
Close. appendTo (imgbox );

Var imgs = $ ('<input type = "image"/> ');
Imgs. attr ('name', 'mum '+ num );
Num ++;
Imgs. appendTo (imgbox );
Imgs. attr ('src', evt.tar get. result );
}
}
}
}

</Script>