0

我有一个 javascript/html 代码可以在单独的 html 文件中正常工作，并且可以在 JSFiddle 上正常工作，但是当我在视图中的项目上尝试它时，它不起作用！我认为这是一个与 JQuery 版本相关的问题。我有最新版本，我删除它并安装了 1.8.3 和 1.7.1 但它仍然无法正常工作！你有什么想法或方法来解决它吗？这让我疯狂！

这是 JSFiddle 的链接：http: //jsfiddle.net/6bn3K/拖放 上传

http://jsfiddle.net/7aDak/ JQUERY标签输入插件

Visual Studio 2012 Express 2012 for Web、MVC 4 Internet 应用程序...

PS：我试过了

<script src="~/Scripts/jquery-1.7.1.js"></script>

和

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript" charset="utf-8"></script>

布局页面

<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head>

编辑：

我下载了 filedrop 项目并在 Visual Studio 上运行它......上传拖放工作！这是它的视图页面源：

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.filedrop.js" type="text/javascript"></script>
</head>

<body>
<style type="text/css">
#dropZone {
    background: gray;
    border: black dashed 3px;
    width: 200px;
    padding: 50px;
    text-align: center;
    color: white;
}
</style>
<script type="text/javascript">
$(function () {
    $('#dropZone').filedrop({
        url: '/Home/UploadFiles',
        paramname: 'files',
        maxFiles: 5,
        dragOver: function () {
            $('#dropZone').css('background', 'blue');
        },
        dragLeave: function () {
            $('#dropZone').css('background', 'gray');
        },
        drop: function () {
            $('#dropZone').css('background', 'gray');
        },
        afterAll: function () {
            $('#dropZone').html('The file(s) have been uploaded successfully!');
        },
        uploadFinished: function (i, file, response, time) {
            $('#uploadResult').append('<li>' + file.name + '</li>');
        }
    });
});
</script>


<h2>File Drag & Drop Upload Demo</h2>
<div id="dropZone">Drop your files here</div>
<br/>
Uploaded Files:
<ul id="uploadResult">

</ul>
</body>
</html>

它仍然无法在我的项目中工作！这是我的项目的视图页面源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> - My ASP.NET MVC Application</title>
<script src="/Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/Scripts/jquery.filedrop.js" type="text/javascript"></script>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />         


    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title"><a href="/">Mocodis</a></p>
            </div>
            <div class="float-right">


            </div>
        </div>
    </header>
    <div id="body">

        <section class="content-wrapper main-content clear-fix">






<style type="text/css">
#dropZone {
    background: gray;
    border: black dashed 3px;
    width: 200px;
    padding: 50px;
    text-align: center;
    color: white;
}
</style>
<script type="text/javascript">
$(function () {
    $('#dropZone').filedrop({
        url: '/Home/UploadFiles',
        paramname: 'files',
        maxFiles: 5,
        dragOver: function () {
            $('#dropZone').css('background', 'blue');
        },
        dragLeave: function () {
            $('#dropZone').css('background', 'gray');
        },
        drop: function () {
            $('#dropZone').css('background', 'gray');
        },
        afterAll: function () {
            $('#dropZone').html('The file(s) have been uploaded successfully!');
        },
        uploadFinished: function (i, file, response, time) {
            $('#uploadResult').append('<li>' + file.name + '</li>');
        }
    });
});
</script>


<h2>File Drag & Drop Upload Demo</h2>
<div id="dropZone">Drop your files here</div>
<br/>
Uploaded Files:
<ul id="uploadResult">

</ul>

        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; 2013 - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    <script src="/Scripts/jquery-1.8.3.js"></script>


</body>
</html>
4

1 回答 1

0

如果没有完整的代码，我只能建议一些更改来尝试：

  1. 添加type="text/javascript"到您的原件<script src="~/Scripts/jquery-1.7.1.js"></script>，因为它似乎丢失了。

  2. 而是通过一个新的包添加 JQuery（这也自动获得了最好的 JS 压缩和版本控制功能）：

例如，将其添加到 App_Start\BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js");

并将其放入您的 Views/shared/_layout.cshtml：

@Scripts.Render("~/bundles/jquery")

要使用未压缩/未缓存的文件进行测试，请将其添加到末尾RegisterBundles()

BundleTable.EnableOptimizations = false;

3. 使用 Fiddler2 查看实际发出了什么请求（即它实际上是在请求你的 js 文件吗）

于 2013-08-09T13:10:05.643 回答