javascript - 为什么我的 js 脚本在从文件引用时无法加载，但在本地使用时却可以工作？

Question

我在我的 aspx 页面中使用了脚本链接，但它不起作用，但是当我将相同的脚本复制到我的 aspx 页面内的标记中时，它会起作用，但当保存在单独的文件中并链接时则不起作用。

错误:

未捕获的类型错误:无法读取 null 的属性“值” 保存时(custom.js:9) 在 HTMLInputElement.onclick (frmPicStories.aspx:91)

.aspx 页面:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="frmPicStories.aspx.cs" Inherits="HimHer.Pages.frmPicStories" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style>
        .container-fluid-ex {
            width: 40%;
            margin-left: 35% !important;
            margin-top: 10% !important;
            border-style: ridge;
            padding-bottom: 10px;
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 18px;
            border-width: 1px;
        }
    </style>


    <script src="../assets/Js/custom.js" type="text/javascript"></script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderPageContents" runat="server">
    <div class="container-fluid-ex">
            <div class="row">
                <div class="col-md-12">
                    <label>Story</label>
                    <textarea id="txtStory" type="text" class="form-control"></textarea>
                    <br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Image</label>
                    <%--<input runat="server" type="file" id="imgUploader" />--%>
                   <asp:FileUpload ID="imgUploader" runat="server" />
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-06">
                    <%--<button type="submit" onclick='save()' class="btn btn-primary pull-right">Save</button>--%>
                     <asp:Button ID="btnSave" class="btn btn-primary pull-right" Text="Save" runat="server" OnClientClick='save(); return false;' />
                </div>

                <div class="col-md-06">
                    <button type="submit" onclick='show()' class="btn btn-warning pull-right">Show</button>
                </div>
            </div>
        </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderScripts" runat="server">
</asp:Content>

custom.js 文件中的 JS 代码

function save() {
    var uploadedImageValue = document.getElementById("<%= imgUploader.ClientID %>");

    var images = {
        Image: uploadedImageValue.value,
        Story: txtStory.value
    };

    var JsonImages = JSON.stringify(images);

    $.ajax
    ({
        url: '/Images/post',
        type: 'POST',
        contentType: "application/json; charset= utf-8",
        data: JsonImages,
        dataType: 'json',
        success: function (results) {
            alert(results);
            $('#myModal').modal('hide');
        }
    });
}
function show() {
    var table = $('#example').DataTable({
        "serverSide": true,
        "retrieve": true,
        "destroy": true,
        "contentType": 'application/json; charset=utf-8',
        "pagingType": "full_numbers",
        "paging": true,
        "ajax": "http://localhost:28071/Users",
        "columnDefs": [{
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        }]
    });
    $('#example tbody').on
    (
        'click',
        'button',
        function () {
            var $row = $(this).closest('tr');
            var $cellUserName = $row.find('td:nth-child(1)');
            var $cellUserPwd = $row.find('td:nth-child(2)');

            txtStoryEdit.value = $cellUserName.text();
            txtPassword.value = $cellUserPwd.text();

            $('#myModal').modal('show');
        }
    )
}

function update() {
    var users = {

        UserName: txtStoryEdit.value,
        Password: txtPassword.value
    };

    var JsonUsers = JSON.stringify(users);

    $.ajax
    ({
        url: 'http://localhost:28071/Users/' + 1,
        type: 'PUT',
        contentType: "application/json; charset= utf-8",
        data: JsonUsers,
        success: function (results) {
            alert(results);
            $('#myModal').modal('hide');
        }
    });
}

文件夹层次结构:

C# 代码:

protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                this.btnSave.Attributes.Add("onClick", "save()");

                if (!IsPostBack)
                {

                }

            }
            catch (Exception)
            {
                throw;
            }
        }

Answer 1

线路

var uploadedImageValue = document.getElementById("<%= imgUploader.ClientID %>");

没有 imgUploader 的值，因此该行失败

uploadedImageValue.value