为什么我的js脚本不是从文件引用时加载的，而是在本地使用时运行的？

Question

我在我的aspx页面中使用了一个脚本链接，但它不起作用，但是当我将相同的脚本复制到标签内的aspx页面时，它可以工作，但不能保存在单独的文件中并链接。

错误：

遗漏的类型错误： 在HTMLInputElement.onclick（frmPicStories.aspx：91）

：在保存（9 custom.js）不能看空 的特性 '值'。 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 

Answer 2

你在JS第一线的问题是：

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

你希望它运行一个JS文件中ASPX代码，这不会发生。改为传递对象。

function save(uploadedImageValue) { 
... 
} 

在你的ASPX：

<asp:Button ID="btnSave" class="btn btn-primary pull-right" Text="Save" runat="server" OnClientClick='save("<%= imgUploader.ClientID %>"); return false;' />