在上传多个图像之前预览图像[重复](Preview images before it is uploaded for more than one image [duplicate])
这个问题在这里已有答案：
在上传 20个答案 之前预览图像 在上传 3个答案 之前显示图像预览我希望能够在上传之前预览图像，并且我已经定制了<input type="file">类的图像 我需要用带有图像的plus inside替换矩形
我怎样才能做到这一点？ 这是我的HTML和CSS http://jsfiddle.net/YJG79/2/
This question already has an answer here:
Preview an image before it is uploaded 19 answers Show an image preview before upload 4 answersI want to be able to preview images in form before they are uploaded and I have customized <input type="file"> like I need to replace rectangle with plus inside with an image
How can I do this? It's my HTML and CSS http://jsfiddle.net/YJG79/2/
最满意答案
是的，您可以在上传表单之前显示图像预览
试试这个例子
谢谢。
更新答案：
试试这个JSFiddle示例
HTML
<form name="" method="post" action="#" class="feedback-form-1"> <fieldset> <div class="input-file-row-1"> <div class="upload-file-container"> <img id="preview_image" src="#" alt="" /> <div class="upload-file-container-text"> <div class = 'one_opacity_0'> <input type="file" id="patient_pic" label = "add" /> </div> <span> Add Photo </span> </div> </div> </div> </fieldset> </form>JQuery的：
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：
.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; }Yes, you can display preview of image before uploading form
Try this Example
Thanks.
Updating the answer:
Try this JSFiddle example
HTML
<form name="" method="post" action="#" class="feedback-form-1"> <fieldset> <div class="input-file-row-1"> <div class="upload-file-container"> <img id="preview_image" src="#" alt="" /> <div class="upload-file-container-text"> <div class = 'one_opacity_0'> <input type="file" id="patient_pic" label = "add" /> </div> <span> Add Photo </span> </div> </div> </div> </fieldset> </form>JQuery:
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:
.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; }更多推荐
发布评论