英文:
Struggling with integrating DropZoneJS into a C# WebForms app
问题
你正在努力使 DropZoneJS 在我的 ASP.NET C# WebForms 应用程序中工作，我可以提供一些帮助。
在基本主页面中，我有以下代码：
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="main.master.cs" Inherits="demo.main1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="cpMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
我还有一个使用它并打算使用 DropZoneJS 上传图像文件的 ASP.NET ASPX 页面：
<%@ Page Title="" Language="C#" MasterPageFile="~/main.Master" AutoEventWireup="true" CodeBehind="main2.aspx.cs" Inherits="Pueblo411.main2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cpMain" runat="server">
<h3>示例演示如何使用 jQuery Dropzone 插件上传文件</h3>
<form action="/main2.aspx" method="post" class="dropzone">
<div class="fallback">
<input type="file" name="file" multiple>
</div>
</form>
<script>
$(function () {
var myFileUploadDropZone = new Dropzone(".dropzone", {
url: "test.ashx",
maxFiles: 15,
maxFilesize: 5,
acceptedFiles: ".png, .jpg, .gif, .pdf, .doc",
addRemoveLinks: true,
dictDefaultMessage: "将文件拖到这里或点击上传",
dictFallbackMessage: "您的浏览器不支持拖放功能。",
dictInvalidFileType: "不支持上传的文件类型。",
dictFileTooBig: "文件过大 ({{filesize}} MB)。最大文件大小: {{maxFilesize}} MB。",
dictResponseError: "服务器以 {{statusCode}} 状态码响应。",
dictCancelUpload: "取消上传",
dictRemoveFile: "移除",
init: function () {
this.on("complete", function (file) {
this.removeFile(file);
});
}
});
});
</script>
</asp:Content>
当我执行以上页面时，我得到了这个结果：
所以，我对我在这里做错了令人困惑。请帮忙看看。
英文:
I am struggling to get DropZoneJS to work in my ASP.NET C# WebForms app, and I could use some help.
I have the following code in a basic Master page:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="main.master.cs" Inherits="demo.main1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="cpMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
and I have the following ASP.NET ASPX page that uses it and is meant to use DropZoneJS to upload image files:
<%@ Page Title="" Language="C#" MasterPageFile="~/main.Master" AutoEventWireup="true" CodeBehind="main2.aspx.cs" Inherits="Pueblo411.main2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cpMain" runat="server">
<h3>Example demonstrating how to upload files using jQuery Dropzone Plugin</h3>
<form action="/main2.aspx" method="post" class="dropzone">
<div class="fallback">
<input type="file" name="file" multiple>
</div>
</form>
<script>
$(function () {
var myFileUploadDropZone = new Dropzone(".dropzone", {
url: "test.ashx",
maxFiles: 15,
maxFilesize: 5,
acceptedFiles: ".png, .jpg, .gif, .pdf, .doc",
addRemoveLinks: true,
dictDefaultMessage: "Drop your files here or click to upload",
dictFallbackMessage: "Your browser does not support drag & drop feature.",
dictInvalidFileType: "Your uploaded file type is not supported.",
dictFileTooBig: "File is too big ({{filesize}} MB). Max filesize: {{maxFilesize}} MB.",
dictResponseError: "Server responded with {{statusCode}} code.",
dictCancelUpload: "Cancel Upload",
dictRemoveFile: "Remove",
init: function () {
this.on("complete", function (file) {
this.removeFile(file);
});
}
});
});
</script>
</asp:Content>
When I execute the above page, this is what I get:
So, I am confused about what I'm doing wrong here. Any help please?
答案1
得分: 0
以下是翻译好的部分：
首先，我无法想象任何情况下文件上传会成为主页面的一部分。
您当然可以考虑将 "cdn" 引用添加到主页面中，以便您可以在任何页面中使用文件上传器（dropzone）。
但是，由于上传页面将成为主页面的子页面并且是独立的页面，我认为我会将脚本引用放在那个单独的页面中。
不过，让我们假设您已经在主页面中设置了当前的 "cdn"。
所以，现在让我们创建一个新页面（在大多数情况下是主页面的子页面）。
然后让我们设置页面以处理上传。
请参考以下标记：
<div id="myfiledropzone" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple" runat="server" />
<asp:Label ID="lblFallbackMessage" runat="server" />
</div>
</div>
<asp:Button ID="cmdUpLoad" runat="server" Text="Upload"
CssClass="btn" />
<script type="text/javascript">
Dropzone.options.myfiledropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
url: "DropZoneLoader.ashx"
};
</script>
注意我们有一个 asp.net 按钮，但它没有代码存根。所以，它的所有操作都将进行页面回发。
因此，接下来，代替当前页面中的一个 web 方法（我既没有也找不到一个好的示例），我们必须添加一个用于上传的 "handler"。
所以，我假设我们创建这个处理程序与上传页面位于相同的文件夹级别。（因此不必担心 URL 路径名称）。
所以，创建（添加）一个新的 Http 处理程序。
这个：
其中的代码可以是这样的：
public void ProcessRequest(HttpContext context)
{
foreach (string s in context.Request.Files)
{
HttpPostedFile file = context.Request.Files展开收缩;
string fileName = file.FileName;
string fileExtension = file.ContentType;
string FileWithPath = "";
if (!string.IsNullOrEmpty(fileName))
{
fileExtension = Path.GetExtension(fileName);
FileWithPath = HttpContext.Current.Server.MapPath(@"~/UpLoadedFiles/") + fileName;
file.SaveAs(FileWithPath);
}
}
}
这应该可以做到。
所以，结果看起来像这样：
以上是一个工作概念的证明。
请不要尝试在现有的作为主页面子页面的现有网页中使用 "form" 标签。不管怎样，多个表单标签是不允许的。
正如我所指出的，我很抱歉没有一个方便的 web 方法可以放入现有的网页中，但这只是 drop zone 社区的巨大失败，而不是 asp.net 社区的失败。然而，添加那个单独的 "new" http 处理程序（我们不应该这样做）确实有效。因此，在上述示例中，我们添加了一个单独的 "new" 页面（http 处理程序）称为 DropZoneLoader.ashx，您也必须这样做。
无论如何，请尝试一下以上的方法。然后，您可以开始添加一些您已经添加到 drop zone 的现有选项，但至少现在您有一个可以工作的 "概念验证"。
英文:
Firstly, I can't imagine any use case in which the file uploading would be part of the master page.
You can certainly consider dropping in the "cdn" references into the master page so you can enjoy use of the file uploader (dropzone) in any page.
However, since a up-loader page is going to be a child and separate page (of that master page), then again, I think I would place the script reference into that ONE page.
However, let's leave and assume you have the current existing "cdn" setup in master page.
So, now let's create a new page (a child as master in most cases).
And let's setup the page to work with the uploads.
Say this markup:
<div id="myfiledropzone" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple" runat="server" />
<asp:Label ID="lblFallbackMessage" runat="server" />
</div>
</div>
<asp:Button ID="cmdUpLoad" runat="server" Text="Upload"
CssClass="btn" />
</div>
<script type="text/javascript">
Dropzone.options.myfiledropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
url: "DropZoneLoader.ashx"
};
</script>
Note how we have asp.net button, but it has no code stub. So, all it going to do is post-back for us.
So, next up, in place of a web method in the current page (which I don't have nor can find a good example), then we have to add a "handler" for the up-load code.
So, I'll assume we create this handler at the SAME folder level as our up-load page. (and thus not have to mess nor worry about the URL path names).
So, create (add) a new Http handler.
This one:
And the code inside can be this:
public void ProcessRequest(HttpContext context)
{
foreach (string s in context.Request.Files)
{
HttpPostedFile file = context.Request.Files展开收缩;
string fileName = file.FileName;
string fileExtension = file.ContentType;
string FileWithPath = "";
if (!string.IsNullOrEmpty(fileName))
{
fileExtension = Path.GetExtension(fileName);
FileWithPath = HttpContext.Current.Server.MapPath(@"~/UpLoadedFiles/") + fileName;
file.SaveAs(FileWithPath);
}
}
}
And that should do it.
So, the result looks like this:
So, above is a proof of working concept.
Do NOT try and use a "form" tag inside of a existing web page that is a "child" of a master page. Multiple form tags are NOT allowed anyway.
As noted, I apologize for NOT having a handy web method that could be dropped into the existing web page, but that just a huge failing of the drop zone community, not the asp.net community. However, adding that separate "new" http handler (which we should not have to do) does work. So, in above, we added an separate "new" page (http handler) called DropZoneLoader.ashx, and you have to do the same.
Anyway, give the above a try. You could then perhaps start to add some "more" of your existing options you added to drop zone, but at least now you have a working "proof of concept".
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论