使用Uploadify上传图片时报$(...).uploadify is not a function错误

报错根因 #

你遇到的Uncaught TypeError: $(...).uploadify is not a function报错，是Uploadify插件没有正确挂载到jQuery上导致的，对应你代码里的问题点有三个：

1. 重复引入了Uploadify脚本：同时加载了jquery.uploadify.js和jquery.uploadify.min.js两个相同功能的文件，会产生冲突
2. 资源加载顺序错误：Uploadify脚本依赖jQuery，你没有保证jQuery加载完成后再加载Uploadify，且Uploadify的引用位置和调用位置分离，大概率出现调用时插件还未加载的问题
3. 可能存在资源路径错误：如果Uploadify相关文件的实际路径和你写的引用路径不匹配，脚本加载失败也会触发该报错

解决步骤 #

• 首先删除你写在form内部的Uploadify相关js、css引用，避免重复加载
• 调整Scripts节的代码顺序，确保Uploadify资源在jQuery加载完成后、初始化调用前加载，修正后的代码参考如下：

@model CRM.DataModel.Entities.Dictionary.TrainingType
@{ ViewBag.Title = "Edit"; }

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <input type="hidden" class="form-control" value="@Model.Id" name="Id">

    <div class="mb-3">
        <label for="exampleInputCarName" class="form-label">Name</label>
        <input type="text" class="form-control" id="exampleInputCarName" value="@Model.Name" name="Name">
    </div>

    <div>
        点击选择文件即可上传文件。
        <input type="file" name="file_upload" id="file_upload" />
    </div>
    <div id="uploaded"></div>


    <button type="submit" class="btn btn-primary">保存</button>
}
@section Scripts
{
    <!-- 如果你的_Layout模板底部已经引入jQuery，可跳过下面这行，否则请先引入对应版本的jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/UploadifyContent/jquery.uploadify.min.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/UploadifyContent/uploadify.css")" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#file_upload').uploadify({
                'swf': "@Url.Content("~/Content/UploadifyContent/uploadify.swf")",
                'cancelImg': "@Url.Content("~/Content/UploadifyContent/uploadify-cancel.png")",
                'uploader': "@Url.Action("Upload", "TrainingType")",
                'onUploadSuccess' : function(file, data, response) {
                    $("#uploaded").append("<img src='" + data + "' alt='Uploaded Image' />");
                }
            });
        });
    </script>
}

• 确认jQuery版本兼容性：旧版Uploadify不支持高版本jQuery，建议使用1.12.x及以下版本的jQuery测试
• 验证路径正确性：打开浏览器F12控制台的网络面板，刷新页面查看所有Uploadify相关的js、css、swf文件是否加载成功，出现404则修正对应路径即可

内容的提问来源于stack exchange，提问作者Boris