MVC JScript 上传照片并显示预览

Question

我要求用户在创建新记录时能够上传物品的照片。

很好很简单，我遇到的问题是在提交前预览上传

这是我目前所拥有的运行全部与最后一行分开的内容。

            <img id="AssetPic" src="~/Content/missing.png" alt="Upload Photo" width="250" height="250" /><br />
            <input type="file" accept="image/*" onchange="loadFile(event)" name="fileupload" />
            <script>
                function createObjectURL(file) {
                    if (window.webkitURL) {
                        return window.webkitURL.createObjectURL(file);
                    } else if (window.URL && window.URL.createObjectURL) {
                        return window.URL.createObjectURL(file);
                    } else {
                        return null;
                    }
                }

                var loadFile = function (event) {
                    var output = document.getElementById('AssetPic');
                    output.alt = "Your Photo";
                    output.src = createObjectURL(event.currentTarget.files[0]);
                };
            </script>

问题行

 output.src = createObjectURL(event.currentTarget.files[0]);

错误信息

0x800a138f - JavaScript runtime error: Unable to get property 'files' of undefined or null reference

然而，如果我将其复制并粘贴到一个单独的记事本文件中并运行它，它工作正常，这让我相信属性 [文件] 正在被另一个脚本干扰。

它是一个标准的 MVC5 应用程序，我添加到其中的唯一脚本是 JSpritely。

有谁知道解决这个问题的方法吗？真是令人沮丧！

Answer 1

确保 IE 的兼容模式没有打开..... 手掌

MVC JScript 上传照片并显示预览

MVC JScript Upload a Photo and Display Preview

javascript

image-uploading

razor

asp.net-mvc-5