Question

所以我一直在尝试找到一个很好的解决方案，在上传之前预览本地图片，因为出于安全考虑，您不能简单地在HTML中引用本地图片......

<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
<img src="@Model.ImagePath[outer]" class="img-responsive" id="@("ProductImage" + outer.ToString())" />
@if (Model.PreviewMode == false)
{
    <div style="position:absolute; bottom:60px">
         @Html.TextBoxFor(m => m.ImageFiles[outer], new { type = "file", onchange = ("PreviewImage('" + outer.ToString() + "')"), id = ("ProductImageUpload" + outer.ToString()) })
    </div>
 }

所以这是我项目中的一小段HTML，因为我确信你猜测它来自一个outer是控制变量之一的循环。

    <script>
    function PreviewImage() {
        // Where you will display your image
        var preview = document.querySelector('img');
        // The button where the user chooses the local image to display
        var file = document.querySelector('input[type=file]').files[0];

        // FileReader instance
        var reader = new FileReader();

        // When the image is loaded we will set it as source of
        // our img tag
        reader.onloadend = function () {
            preview.src = reader.result;
        }


        if (file) {
            // Load image as a base64 encoded URI
            reader.readAsDataURL(file);
        }
        else {
            preview.src = "";
        }
    }

</script>

我从另一篇文章中得到了这个代码，它对单个图像效果很好，但出于某种原因，只要我有多个图像和图像输入它就会停止工作。

我会想象某种方式手动选择源和目的地（通过将ID传递给函数）

这样的事情：

var file = document.getElementById("ProductImageUpload" + ID).files[0];

有谁知道我怎么能做到这一点？

Answer 1

因此，经过大量研究，了解我不存在的javascript技能和更高权力的咨询，我提出了这个解决方案：

<script>
    function PreviewImage(ID) {

        // Where you will display your image
        //var preview = document.querySelector('img');
        var preview = document.getElementById("ProductImage" + ID);
        // The button where the user chooses the local image to display
        //var file = document.querySelector('input[type=file]').files[0];
        var file = document.getElementById("ProductImageUpload" + ID).files[0];
        // FileReader instance
        var reader = new FileReader();

        // When the image is loaded we will set it as source of
        // our img tag
        reader.onloadend = function () {
            preview.src = reader.result;
        }


        if (file) {
            // Load image as a base64 encoded URI
            reader.readAsDataURL(file);
        }
        else {
            preview.src = "";
        }
    }

</script>

是的，是的，解决方案真的很简单。

但无论您在表单中动态生成多少图像，这都可以正常运行。（请参阅关于如何调用方法的HTML问题）

在MVC上传之前预览图像

1 个答案: