我正在使用 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="/Scripts/fileinput.min.js"></script>
是用于查看该文件代码的链接。部署时,同一行是不工作的链接,它会抛出此错误,我注意到它在 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" />
希望这对将来的其他人有所帮助。