Preview images before it is uploaded for more than one image
本问题已经有最佳答案,请猛点这里访问。
我希望能够在上传之前预览图像,我已经定制了
我需要用带有图像的plus inside替换矩形
我怎样才能做到这一点?
这是我的HTML和CSS http://jsfiddle.net/YJG79/2/
是的,您可以在上传表单之前显示图像预览
试试这个例子
谢谢。
更新答案:
试试这个JSFiddle示例
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <form name="" method="post" action="#" class="feedback-form-1"> <fieldset> <img id="preview_image" src="#" alt="" /> <input type="file" id="patient_pic" label ="add" /> <span> Add Photo </span> </fieldset> </form> |
JQuery的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function readURL(input, target) { if (input.files && input.files[0]) { var reader = new FileReader(); var image_target = $(target); reader.onload = function (e) { image_target.attr('src', e.target.result).show(); }; reader.readAsDataURL(input.files[0]); } } $("#patient_pic").live("change",function(){ readURL(this,"#preview_image") }); |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | .input-file-row-1:after { content:"."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .input-file-row-1{ display: inline-block; margin-top: 25px; position: relative; } #preview_image { display: none; width: 90px; height: 90px; margin: 2px 0px 0px 5px; border-radius: 10px; } .upload-file-container { position: relative; width: 100px; height: 137px; overflow: hidden; background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat; float: left; margin-left: 23px; } .upload-file-container-text{ font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .upload-file-container-text > span{ border-bottom: 1px solid #719d2b; cursor: pointer; } .one_opacity_0 { opacity: 0; height: 0; width: 1px; float: left; } |