javascript - 在 div 中显示上传的图片

标签 javascript jquery css html

  • 当我上传图片时,你能告诉我如何在红框内显示图片吗
  • 提供以下代码

http://codepen.io/anon/pen/ZWXmpd

<div class="upload-image">
    <div class="upload-image-preview"></div>
    <input type="file" name="file" value="Upload Image" />
</div>

最佳答案

您可以使用类似的东西在上传前显示您的图片。

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
    var image, file;
    if ((file = this.files[0])) {
        image = new Image();
        image.onload = function() {
				src = this.src;
        $('#uploadPreview').html('<img src="'+ src +'"></div>');
				e.preventDefault();
			}
        };
        image.src = _URL.createObjectURL(file);
});
#uploadPreview {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#uploadPreview img {
  min-width: 100%;
  min-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file"/>
<div id="uploadPreview">

</div>

关于javascript - 在 div 中显示上传的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36382457/

相关文章:

循环内的 JavaScript 闭包——简单实用的示例

javascript - 使用 JQuery 将 bootstrap 中的行 col 替换为另一行并淡入淡出

javascript - JS 下划线 : array of dicts in pairs

asp.net - jQuery/Javascript - 如何检测图像是否已重新加载

jquery - 如何选择具有几个不同类中的任何一个的元素?

css - 定位 iframe

html - 导航不正确 float

javascript - 如何使用 jQuery 删除附加有 .append() 方法的弹出式 div?

javascript - 仅当请求 https 页面时,才通过 https href google 字体

javascript - Jquery 正确隐藏 iframe,但点击时不显示它