jquery - 图像弹出不显示

Question

我在MVC中开发了Jquery图像上传脚本，我的上传脚本确实有效，但我上传的图像没有显示弹出，它点击上传的图片后。请帮我解决我的问题，提前致谢

上传的脚本

<script type="text/javascript">
        $(document).ready(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                url: '/Home/UploadFiles',
                autoUpload: true,
                done: function (e, data) {
                    $('.file_name').html(data.result.name);
                    $('.file_type').html(data.result.type);
                    $('.file_size').html(data.result.size);

                }
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress .progress-bar').css('width', progress + '%');
            });
        });
    </script>

上传的图像显示脚本

    <script>
    var loadFile = function (event) {
        var output = document.getElementById('output');
        output.src = URL.createObjectURL(event.target.files[0]);
    };
</script>




<script>
    window.document.onkeydown = function (e) {
        if (!e) {
            e = event;
        }
        if (e.keyCode == 27) {
            lightbox_close();
        }
    }


    function lightbox_open() {
        window.scrollTo(0, 0);
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
    }

    function lightbox_close() {
        document.getElementById('light').style.display = 'none';
        document.getElementById('fade').style.display = 'none';
    }
</script>

查看

<div class="container">
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <input id="fileupload" type="file" name="files[]" multiple onchange="loadFile(event)">
        </span>
        <br />
        <div class="progress" style="width:500px;">


            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                100% Complete (success)
            </div>
        </div>
        <br />
        <div class="file_name"></div>
        <br />
        <div class="file_type"></div>
        <br />
        <div class="file_size"></div>




<a href="#" onclick="lightbox_open();"><img id="output" style="width:200px; height:200px;" /></a>
    <div id="light"></div>
    <div id="fade" onclick="lightbox_close();"></div></div>

Answer 1

您可以使用:

done: function (e, data) {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#light").css("background-image", 'url(' + dataURL +')');
      //other stuff

然后避免使用loadFile()函数，这样，就全部“统一”在同一个函数中了。我想你应该为 '#light' div 设置宽度和高度并删除 img 标签。