部署时引导文件输入不起作用答案

【问题标题】：Bootstrap file input not working when deployed部署时引导文件输入不起作用
【发布时间】：2017-10-19 21:33:20
【问题描述】：

我正在使用 Bootstrap 文件输入包，它在本地工作，但在生产中失败。

我读过可能是js文件加载不正确，但还没有找到解决办法。

编辑

这是代码：

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
     This must be loaded before fileinput.min.js -->
<script src="/Scripts/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
     This must be loaded before fileinput.min.js -->
<script src="/Scripts/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for HTML files.
     This must be loaded before fileinput.min.js -->
<script src="/Scripts/plugins/purify.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<script src="/Scripts/fileinput.min.js"></script>
<!-- bootstrap.js below is needed if you wish to zoom and view file content 
     in a larger detailed modal dialog -->
<link href="/Content/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<div class="form-group">
    <label for="input-44" class="col-lg-2 control-label">Cargar fotos</label>
    <div class="col-lg-10">
        <input id="input-44" name="input44[]" type="file" multiple class="file-loading">
        <script>
            $(document).on('ready', function () {
                $("#input-44").fileinput({
                    uploadUrl: '/file-upload-batch/2',
                    'showUpload': false,
                    maxFilePreviewSize: 10240,
                    fileActionSettings: {
                        showUpload: false,
                        indicatorNew: ''
                    }
                });
            });
        </script>
    </div>
</div> </asp:Content>

【问题讨论】：

您能否分享一些您的代码，以便我们更好地了解发生了什么？
当然，我就是这么做的。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 应该有领先的https:？
Michael 的建议是否解决了问题？
不，看起来还是一样...

标签： javascript jquery asp.net twitter-bootstrap iis

【解决方案1】：

阅读并尝试解决这一问题一整天后，我决定查看页面源代码两种方案（开发/生产）并进行比较。

在开发中，<script src="/Scripts/fileinput.min.js"></script> 这一行是查看该文件代码的链接。部署时，同一行是一个不工作的链接，它抛出this error，我注意到它在 ip(192.168.0.145) 和路径 /Scripts 之间缺少我的项目名称。

如果我尝试这个<script src="/MyProject/Scripts/fileinput.min.js"></script> 我让它在生产上工作但在开发失败的原因上然后它的目标是 192.168.0.145/MyProject/MyProject/Scripts/fileinput.min.js 和这个路径也不存在。

解决方案

只要在开头加两点，像这样：

<script src="../Scripts/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="../Scripts/plugins/sortable.min.js" type="text/javascript"></script>
<script src="../Scripts/plugins/purify.min.js" type="text/javascript"></script>
<script src="../Scripts/fileinput.min.js"></script>
<link href="../Content/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

希望这对将来的其他人有所帮助。

【讨论】：