ASP.net - 使用 jQuery 多文件上传插件进行多次上传

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/562696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:21:17  来源:igfitidea点击:

ASP.net - Multiple Upload with jQuery Multiple File Upload Plugin

asp.netjqueryfile-uploadmultifile-uploader

提问by Ronnie Overby

I know how to upload with ASP.net's FileUpload control.

我知道如何使用 ASP.net 的 FileUpload 控件上传。

What I want to do is use this jQuery Multiple File Upload Plugin to upload multiple files.

我想要做的是使用这个 jQuery Multiple File Upload Plugin 上传多个文件。

Here is exactly what it does when multiple files are selected for upload:

这正是选择多个文件进行上传时的作用:

<input type="file class="multi MultiFile" id="MultiFile1_F3" name="file1[]" style="position: absolute; top: -3000px;">

But I cannot figure out how to manipulate these files from asp.net. I have tried using Request.Files as the following link instructs: ASP.Net Upload of multiple files after choosing them from jQuery

但我无法弄清楚如何从 asp.net 操作这些文件。我曾尝试使用 Request.Files 作为以下链接指示: ASP.Net 从 jQuery 中选择多个文件后上传多个文件

That doesn't work. I think that only works for controls marked with runat="server" at compile time.

那行不通。我认为这仅适用于在编译时标有 runat="server" 的控件。

Does anyone know how to do this? Maybe something in Request.Form...?

有谁知道如何做到这一点?也许是 Request.Form 中的某些东西...?

Thanks for your help!

谢谢你的帮助!

采纳答案by Tom

It's been a bit since I did that kind of thing in .NET, but once you begin cloning form inputs dynamically, I think you have to go out to Request.Form and find the submitted values manually. I wrote up the jQuery code to clone some (non-file) inputs with sequential identifiers here. As long as you have unique identifiers, you can run a loop to see if Request.Form["MultiFile1_F" + counter] exists and go from there.

自从我在 .NET 中做这种事情已经有一段时间了,但是一旦您开始动态克隆表单输入,我认为您必须去 Request.Form 并手动查找提交的值。我写了 jQuery 代码来克隆一些带有顺序标识符的(非文件)输入here。只要你有唯一的标识符,你就可以运行一个循环来查看 Request.Form["MultiFile1_F" + counter] 是否存在并从那里开始。

回答by Chris Hynes

Two things to check:

要检查的两件事:

  • Make sure your form has the enctype="multipart/form-data" attribute set. This is required to enable uploads.
  • Make sure all file inputs have both id and name attributes set. For some reason, if you don't set both, wierd things happen.
  • 确保您的表单设置了 enctype="multipart/form-data" 属性。这是启用上传所必需的。
  • 确保所有文件输入都设置了 id 和 name 属性。出于某种原因,如果您不设置两者,就会发生奇怪的事情。

Also, runat="server" shouldn't have anything to do with whether Request.Files works or not -- this is more an issue of the browser actually posting the files.

此外, runat="server" 不应该与 Request.Files 是否工作有任何关系——这更多是浏览器实际发布文件的问题。

回答by Ronnie Overby

This jQuery plugin was giving every generated input control the exact same name attribute.

这个 jQuery 插件为每个生成的输入控件提供了完全相同的名称属性。

For this reason, the files were not posting.

出于这个原因,文件没有发布。

I built my own javascript solution.

我构建了自己的 javascript 解决方案。

I will post a link to the code in a comment.

我将在评论中发布代码链接。

Edit

编辑

I revisited this and found that what I was trying to do wasn't very difficult at all. I got the the jquery multiple file upload plugin to work fine with my aspx form. I don't know why I was having so much trouble before.

我重新审视了这个,发现我试图做的事情一点也不难。我得到了 jquery 多文件上传插件,可以很好地处理我的 aspx 表单。我不知道为什么我以前遇到了这么多麻烦。

1.) Include the jQuery library on the web form:

1.) 在 Web 表单中包含 jQuery 库:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" />

2.) Reference the multiple file plugin on the web form (Download it here):

2.) 参考网页表单上的多文件插件(在此下载):

<script src="jquery.MultiFile.pack.js" type="text/javascript">

3.) Add a file input on your web form with class="multi":

3.) 使用 class="multi" 在您的 web 表单上添加一个文件输入:

<input type="file" class="multi" />

4.) Execute some code or call a method like this on form submission:

4.) 在表单提交时执行一些代码或调用这样的方法:

    void SendMail(string from, string to, string subject, string body, string smtpServer)
    {
        // create mail message
        MailMessage mail = new MailMessage(from, to, subject, body);

        // attach posted files
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFile file = Request.Files[i];
            mail.Attachments.Add(new Attachment(file.InputStream, file.FileName));
        }

        //send email
        new SmtpClient(smtpServer).Send(mail);
    }

This is all that I had to do to attach multiple files to an email sent from an aspx page.

这就是将多个文件附加到从 aspx 页面发送的电子邮件中所需要做的全部工作。

If you want to increase the total size of the files that can be uploaded, add this to your web.config file:

如果要增加可以上传的文件的总大小,请将其添加到您的 web.config 文件中:

<system.web>
    <httpRuntime executionTimeout="240" maxRequestLength="30720"/>
</system.web>

The executionTimeout is measured in seconds and maxRequestLength is measured in kilobytes. In this example, the request will timeout after 4 minutes and will allow a 30mb request.

executionTimeout 以秒为单位,maxRequestLength 以千字节为单位。在此示例中,请求将在 4 分钟后超时并允许 30mb 的请求。

回答by Josh Mein

I highly recommend Uploadifyas a mulitple file uploader. It uses jquery and flash to allow the user to upload multiple files at once through ctrl + clicking on all desired files. It then displays a queue of the files uploading and removes the file from the queue on completion. It also allows you to specify which extension to allow the user to upload as well which prevents you from having to do extension validation.

我强烈推荐Uploadify作为一个多文件上传器。它使用 jquery 和 flash 来允许用户通过 ctrl + 单击所有需要的文件一次上传多个文件。然后它显示上传文件的队列,并在完成时从队列中删除文件。它还允许您指定允许用户上传的扩展名,这样您就不必进行扩展名验证。

EDIT:
If you dont want to use flash Ajax Uploadworks really well too. If users on my site company's site dont have the right version of flash that works best with uploadify, I switch to Ajax Upload. They both work very well for me.

编辑:
如果你不想使用 flash Ajax Upload 也可以很好地工作。如果我网站公司网站上的用户没有最适合uploadify 的Flash 版本,我会切换到Ajax Upload。他们都为我工作得很好。