For the sake of record, it may be used in the future, and fellow Taoists in need can also use it.
No, first on the rendering
The above is the renderings. You can change the picture in the upper right corner by yourself. I won’t put the picture material on it, so I will just put the code, which is quite simple, css and js, and beginners should understand it.
</pre><pre name=code class=html><!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content=text/html; charset=utf-8 /><title>Unt titled document</title><style type=text/css>.divX{ z-index:200; -moz-border-radius:20px; -webkit-border-radius:20px; line-height:10px; text-align:center; font-weight:bold; cursor:pointer; font-size:10px; display: none;}</style></head> <body><form id=form style=margin-top:20px;> <div id=img_div_1> <input type=file id=file_input οnchange=addFile(this); style=display:none /> <div style=position: relative;> <img id=file_img src=add_img.png width=75 οnclick=file_input.click(); height=65 /> </div> <div class=divX id=img_zindex_div_1 οnclick=del()> <img src=no.png width=16 height=16 /> </div> </form></body><script src=jquery-1.7.2.js type=text/javascript></script><script type=text/javascript>function addFile(ths) {var objUrl = getObjectURL(ths.files[0]);var left = $('#file_img').position().left;var top = $('#file_img').position().top;$('#img_zindex_div_1').css({position: absolute, left: left + 75, top: top + 10, display: block });$('#file_img').attr(src, objUrl);}function del() {alert(delete);}function getObjectURL(file) {var url = null ; if (window.createObjectURL!=undefined) { // basicurl = window.createObjectURL(file) ;} else if (window.URL!=undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file) ;} else if (window.webkitURL!=undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file) ;} return url ;}</script></html>Get it done. The work has ended. Copy the code and replace the image material and you can use it directly
get off work. Leave
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Replenish. Since left is 0
Get it in another way
var objUrl = getObjectURL(ths.files[0]);var left = $('#file_img').offset().left;var top = $('#file_img').offset().top;// left is the leftmost distance of the default image. The added image can be used according to the width of the default image - delete the width of the layer image (that is, the current default image width is 75, the image width of the delete layer is 16, left = 75 - 16, the position can reach the rightmost side of the image! The same is true for top)$('#img_zindex_div_1').css({position: absolute, left: left + 59, top: top - 5, display: block }); SummarizeThis is the article about html+css that implements the upper right corner of the picture with a delete fork and image deletion button. For more related html pictures with deleted content, please search for previous articles from Wulin.com or continue browsing the related articles below. I hope everyone will support Wulin.com in the future!