我可以使用JavaScript / jQuery来在ASP.NET中上传的文件添加到Request.Files？ [英] Can I use JavaScript/JQuery to add an uploaded file to Request.Files in ASP.NET?

问题描述

我不完全知道我怎么可以添加一个文件到使用JavaScript Request.Files？这是我要什么...

I am not entirely sure how I can add a file into Request.Files using JavaScript? Here is what I'm going for...

var x = $('input[type=file]:eq(0)');

//Add the data to the hidden field
hiddenField.val(x.val());

//Add the html display
fileDisplayDiv.innerHTML += "<a href='#' class='filename'>display name</a>";

//Add this file to request.files
How to do???

//Clear the input so the user may add more files before postback.
x.val("");

输入是一个普通的HTML输入。是的，最终我试图建立一个多文件上传（这就是为什么我在清除输入字段） - 我看着第三方的东西，但我需要我在做什么自定义功能。我想，这似乎是这个任务应该是可能的，要不怎么会阿贾克斯上传工作？

The input is a regular HTML input . Yes, ultimately I am trying to develop a multiple file-upload (this is why I am clearing the input field) - I looked at 3rd party stuff, but I require custom functionality for what I'm doing. I figure it seems like this task should be possible, or else how would the ajax uploaders work?

任何帮助AP preciated，先谢谢了。

Any help appreciated, thanks in advance.

推荐答案

我要提供一个pre-HTML5的方法我倾向于使用。这有一些缺点，但很多优势 - 最主要的是它是几乎完全跨浏览器（唯一的要求是JavaScript和隐藏的IFRAME）

I'm going to supply a pre-HTML5 method I tend to use. This has a few drawbacks but a lot of advantages - the main one is it being almost completely cross-browser (the only requirements are JavaScript and hidden IFRAMEs).

我会立刻列出的缺点，让你知道，你可能会遇到什么问题：

I'll list the drawbacks immediately so you know exactly what problems you might run into:

• 如果您发布到另一个域，你将无法摆脱它
返回

• 您不能得到比其内容的其他任何东西，和HTTP错误会导致它静静地失败。


• 如果失败，你必须重新生成表单。如果出现这种情况，你不能自动重新为用户选择的文件。

解决方案：把你的输入类型=文件在友好的IFRAME，并以此来提交。这不是AJAX，它是一个pretty老方法，但它的作品。

The solution: put your input type="file" in a friendly IFRAME and use this to submit. It's not AJAX, and it's a pretty old method, but it works.

如何

步骤1.创建一个IFRAME，并给它一个ID或类能够有效地选择它。在domready中，而不是塞满了pre-准备的东西来创建它。当您创建它，使用 $（'＃yourIframe'）加载事件分配给它的负载（函数（）{}）; 。触发此动作时，你就会知道，你现在就可以到iframe添加内容。
关键是要复制你的所有的表单元素它，并留下克隆的背后 - 和绑定的所有有用的事件在IFRAME的人。为了：

Step 1. Create an IFRAME and give it an ID or class to be able to select it efficiently. Create it on DOMReady rather than cluttering up the pre-ready stuff. When you create it, assign a load event to it using $('#yourIframe').load(function() { }); . When this triggers, you'll know that you can now add content to your iframe. The trick is to copy all your form elements to it, and to leave "clones" behind - and to bind all the useful events to the ones in the IFRAME. In order:

• 点击（）和更改（）输入类型=文件，输入类型=文本并选择


• 更改（）为别的

• click() and change() for input type="file", input type="text" and select
• change() for anything else

单击事件应该简单地转发到IFRAME元素。在更改（）事件，当绑定到IFRAME中的元素，让你恢复的文件名。

The click event should simply be forwarded to the element in the IFRAME. The change() event, when bound to the element within the IFRAME, allows you to recover the name of the file.

当你点击你的幻象提交按钮，它有一个绑定负荷（）事件的IFRAME，然后提交IFRAME里的表单。当表单被提交，你就可以用$访问负载处理程序中的iframe的内容（身体，$（本）.contents（））。

When you click your phantom submit button, have it bind a load() event to the IFRAME, and then submit the form inside the IFRAME. When the form gets submitted, you'll be able to access the content of the iframe inside the load handler with $("body",$(this).contents()).

我写了一个小的小提琴来说明： http://jsfiddle.net/WQhnM/2/ 。请记住，JSFiddle.net将获得数据（所以不要发送任何东西太严重/罪证;-)），他们的服务器拒绝任何超过100KB大（所以送小东西）。这个想法是存在的，但。我已经离开了IFRAME可见的，所以你可以看到发生了什么。

I've written a small fiddle to illustrate: http://jsfiddle.net/WQhnM/2/ . Bear in mind that JSFiddle.net will get the data (so don't send anything too serious/incriminating ;-) ) and that their server refuses anything bigger than 100kb (so send something small). The idea is there, though. I have left the IFRAME visible so you can see what happens.

这不是目前一pretty的解决方案，但它工作，直到IE浏览器HTML5赶上。

It's not a pretty solution by far, but it works until IE catches up with HTML5.

的修改的：我忘了提及 - 这需要一个黑客在IE7中工作。 更改（）未正确在这个特定的浏览器触发。解决办法：

Edit: I forgot to mention - this needs a hack to work in IE7. change() is not triggered properly in this specific browser. The solution:

if (!$.browser.msie) {
  nItem.change(function() { ... });
}
else {
   nItem.click(function() { 
      setTimeout(function() {
          (function() { ... });
      },0);
   });
}                                   

这篇关于我可以使用JavaScript / jQuery来在ASP.NET中上传的文件添加到Request.Files？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！