Question

我有一个简单的HTML页面，我想从客户端机器上传文件到服务器端，这里我试图使用Kendo UI控件上传文件，但它不能正常工作，我给了我的代码详情如下。

包含的JS文件是“kendo.all.min.js”和受尊重的CSS文件，

用于上传的代码，

$("#btnUpload").kendoUpload({
    async: {
        saveUrl: 'http://localhost:8080/Project1/Cifernet/upload/',
        autoUpload: false
    },
    multiple: true,
    localization: {
        select: 'Select a file',
        uploadSelectedFiles: 'Send',
        error: onError

    }
});


FYI: i got below error from Mozilla console while uploading a file.
[10:04:33.900] Use of getPreventDefault() is deprecated.  
Use defaultPrevented instead. @ http://localhost:8080/Project1/Scripts/jquery-1.8.3.js:3255
[10:04:34.193] GET http://localhost:8080/Project1/Styles/textures/highlight.png [HTTP/1.1 404 Not Found 0ms]
--
[10:04:40.506] POST http://localhost:8080/Project1/upload/POST [HTTP/1.1 404 Not Found 0ms]
[10:04:40.507] GET http://localhost:8080/Project1/Styles/Images/loading.gif [HTTP/1.1 404 Not Found 0ms]
[10:04:40.467] "Server response: <html><head><title>Apache Tomcat/6.0.18 - Error report</title><style><!--H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}HR {color : #525D76;}--></style> </head><body><h1>HTTP Status 404 - /Project1/upload/POST</h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u>/Project1/upload/POST</u></p><p><b>description</b> <u>The requested resource (/Project1/upload/POST) is not available.</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/6.0.18</h3></body></html>"
[10:04:40.511] GET http://localhost:8080/Project1/Styles/textures/highlight.png [HTTP/1.1 404 Not Found 0ms]

任何人请帮我解决这个问题，或者请使用工作示例建议最好的jQuery插件将文件上传到服务器。

Answer 1

尝试此示例来说明您的问题

<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>

        <div id="example" class="k-content">
            <div class="configuration">
                <span class="infoHead">Information</span>
                <p>
                    The Upload can be used as a drop-in replacement
                    for file input elements.
                </p>
                <p>
                    This "synchronous" mode does not require
                    special handling on the server.
                </p>
            </div>
            <form method="post" action="submit" style="width:45%">
                <div class="demo-section">
                    <input name="files" id="files" type="file" />
                    <p>
                        <input type="submit" value="Submit" class="k-button" />
                    </p>
                </div>
            </form>
            <script>
                $(document).ready(function() {
                    $("#files").kendoUpload();
                });
            </script>
        </div>


</body>
</html>

Answer 2

telerik网站上有一个很好的演示：

http://demos.telerik.com/aspnet-mvc/upload/async

以下代码来自该演示网站。

在剃刀中，您的GUI代码将是：

        @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .Save("Save", "Upload")
            .Remove("Remove", "Upload")
            .AutoUpload(true)
        )
    )

然后你会创建一个上传控制器，Save方法看起来像：

    public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
    {
        // The Name of the Upload component is "files"
        if (files != null)
        {
            foreach (var file in files)
            {
                // Some browsers send file names with full path.
                // We are only interested in the file name.
                var fileName = Path.GetFileName(file.FileName);
                var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                // The files are not actually saved in this demo
                // file.SaveAs(physicalPath);
            }
        }

        // Return an empty string to signify success
        return Content("");
    }

你可以看到〜/ App_Data是你文件的路径，我认为这就是你所追求的。

如何使用Kendo UI文件上传控件上传文件？

2 个答案: