Question

当我上传图片时，您可以告诉我如何在红色框内显示图片
提供以下代码

 $('.slideUpBtn').click(function() {
   var minHeight = $('nav').css('min-height');
   $('nav').css('min-height',0);
   $('nav').slideUp("slow", function(){
            $('nav').css('min-height', minHeight);
    });
});
$('.slideDownBtn').click(function() {
     var minHeight = $('nav').css('min-height');
   $('nav').css('min-height',0);
  $('nav').slideDown("slow", function(){
            $('nav').css('min-height', minHeight);
    });
});

Answer 1

您可以使用此类内容在上传前显示图片。

re.sub(r'[^ \\t\w\.]', '', sentence).lower()

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%;
}

Answer 2

上传图片后，您可以返回图片路径。通过js，您可以通过ajax调用在上传响应中显示该图像。

Answer 3

您可以使用以下jQuery执行此操作。

$("input[name=file]").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var img = $('<img>').attr('src', e.target.result);
            $('.upload-image-preview').html(img);
        };

        reader.readAsDataURL(this.files[0]);
    }
});

使用以下CSS保持图像大小与预览div相同。

.upload-image-preview img{
    width: 100%;
    height:  100%;
}

<强> DEMO

在div中显示上传的图像

3 个答案: