<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, User-scalable=no ">
<title> Upload Image Preview Example two </title>
<meta name= "Author" content= "Bear Cub-March 3, 2017"/>
<meta name= "keywords" content= ""/>
<meta name= "description" content= "actual use of multiple images upload and preview, you can set the default picture, and can remove the selection"/>
<style type= "Text/css" >
. image_container {
Display:inline-block;
Float:left;
}
#tdRoomPicture A,. Image_container a {
Text-align:center;
Vertical-align:middle;
Text-decoration:none;
}
a.addimg {
width:100px;
height:100px;
line-height:100px;
Display:inline-block;
font-size:50px;
Background-color: #dae6f3;
}
. Image_container A.previewbox {
Background-color: #dae6f3;
margin:0 3px 0 0;
Display:none;
/*display:inline-block;*/
}
. Image_container. delimg {
Position:absolute;
Color: #f00;
margin:0 0 0 84px;
font-size:16px;
width:16px;
height:16px;
line-height:16px;
Text-align:center;
Vertical-align:middle;
Background-color: #c3c3c3;
}
. defaultimg {
border:1px solid #f90303;
}
. defaultimg:before {
Content: "Default picture";
Float:left;
Position:absolute;
Color: #f90303;
font-size:14px;
}
. defaultimg:after {
Content: "";
}
</style>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<body>
<form id= "Form1" method= "post" enctype= "Multipart/form-data" >
<div id= "Tdroompicture" >
<!--<div class= "Image_container" data-picid= "1" >
<input id= "Roominfo1_roompicture1" name= "Roominfo1_roompicture1" type= "file" accept= "Image/jpeg,image/png,image /gif "style=" display:none; "/>
<input id= "ROOMINFO1_ROOMPICTUREHIDDEFAULT1" name= "ROOMINFO1_ROOMPICTUREHIDDEFAULT1" type= "hidden" value= "0"/ >
<a href= "javascript:;" id= "PreviewBox1" class= "Previewbox defaultimg" >
<div class= "Delimg" >×</div>
</a>
</div>-->
<a href= "javascript:;" class= "addimg" data-picid= "0" >+</a>
</div>
</form>
<script type= "Text/javascript" >
$ (function () {
var picid = 0;
var pictureuploading = false;
$ ("#Form1"). Delegate (". Addimg", "click", Function () {
if (!! pictureuploading) return;
Pictureuploading = true;
Picid = parseint ($ (this). attr ("Data-picid"));
picid++;
$ (this). attr ("Data-picid", picid);
$ (this). Before ("<div class=\" Image_container\ "data-picid=\" "+ picid +" \ ">"
+ "<input id=\" roominfo1_roompicture "+ picid +" \ "name=\" roominfo1_roompicture "+ picid +" \ "type=\" file\ "accept=\" Image/jpeg,image/png,image/gif\ "style=\" display:none;\ "/>"
+ "<input id=\" Roominfo1_roompicturehiddefault "+ picid +" \ "name=\" Roominfo1_roompicturehiddefault "+ picId +" \ "Typ E=\ "hidden\" value=\ "0\"/> "
+ "<a href=\" javascript:;\ "id=\" Previewbox "+ picid +" \ "class=\" previewbox\ ">"
+ "<div class=\" delimg\ ">×</div>"
+ "+ "</a>"
+ "</div>");
$ ("#RoomInfo1_RoomPicture" + picid). Change (function () {
var $file = $ (this);
var fileobj = $file [0];
var windowurl = window. URL | | Window.webkiturl;
var Dataurl;
$ ("#previewBox" + picid). CSS ("display", "Inline-block");
var $img = $ ("#preview" + picid);
var $img = $ ("#preview1");
if (fileobj && fileobj.files && fileobj.files[0]) {
Dataurl = Windowurl.createobjecturl (Fileobj.files[0]);
$img. attr (' src ', dataurl);
} else {
Dataurl = $file. val ();
var imgobj = $img; document.getElementById ("preview");
Two pits:
1, when the Filter property is set, the element must already exist in the DOM tree, the dynamically created node, also need to be added to the DOM before setting the property, first set the attribute is added, invalid;
2, the SRC attribute needs to be added as follows, the above two ways to add, invalid;
ImgObj.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale)";
ImgObj.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = dataurl;
}
if (1 = = = Picid) {
Defaultimg (Picid, true);
}
Pictureuploading = false;
});
$ ("#RoomInfo1_RoomPicture" + picid). Click ();
Set default picture
$ (". Previewbox"). Click (function () {
var _picid = parseint ($ (this). Parent (". Image_container"). attr ("Data-picid"));
$ (". Image_container"). each (function () {
var i = parseint ($ (this). attr ("Data-picid"));
if (i = = = _picid)
Defaultimg (I, true);
Else
Defaultimg (I, false);
});
});
Delete an uploaded picture
$ (". Delimg"). Click (function () {
var _picid = parseint (this). Parent (). Parent (". Image_container"). attr ("Data-picid"));
$ (". Image_container[data-picid= '" + _picid + "']"). Remove ();
if ($ (". Image_container"). Length > 0 && $ (". Defaultimg"). Length < 1) {
$ (". Image_container"). each (function () {
var i = parseint ($ (this). attr ("Data-picid"));
Defaultimg (I, true);
return false;
});
}
});
});
function Defaultimg (Picid, selected) {
if (!picid) return;
if (!! Selected) {
$ ("#RoomInfo1_RoomPictureHidDefault" + picid). val (1);
$ ("#previewBox" + picid). addclass ("defaultimg");
}
else {
$ ("#RoomInfo1_RoomPictureHidDefault" + picid). val (0);
$ ("#previewBox" + picid). Removeclass ("defaultimg");
}
}
});
</script>
</body>
Input type= "file" file upload to get the local path