使用Javascript上传图像 [英] Uploading images using Javascript

问题描述

大家好，



我正在为ASP.NET / C＃中的客户端编写一个网页/应用程序，允许他们管理他们的内容内部网通过创建包含文本和图像等的文章。



作为内容管理系统的一部分，他们希望能够从其他地方复制图像的URL在互联网上，将URL粘贴到文本框中，然后单击提交按钮，以便页面将该文件上载到他们的服务器，以后他们可以在自己的文章中使用它。



听起来很直接，但问题是由于安全限制，他们自己的服务器不允许连接到互联网本身我不能这样做在服务器端抓取图像，必须在客户端上完成，然后发布到服务器 - 大概是使用某种Javascript / AJAX。那么这样做的最佳解决方案是什么？我想知道是否可以使用Javascript和IFrame的组合来完成它？



我当然可以要求用户将图像保存到他们的拥有本地驱动器，然后使用标准的''asp：FileUpload''控件浏览它 - 但他们不想这样，他们只想将URL粘贴到文本框中，然后自动保存到服务器。 br />


我也被限制只使用IE 8.0，因为这是一个内部应用程序，他们不支持其他浏览器。



任何帮助非常感谢！



Nick

Hi guys,

I''m writing a web page/application for my client in ASP.NET/C# which allows them to manage the content on their intranet by creating articles containing text and images, etc.

As part of their content management system, they want to be able to copy the URL of an image from somewhere else on the internet, paste the URL into a text box, and then click the submit button so the page will upload that file to their server where they can use it in their own articles later on.

Sounds straight forward enough, but the problem is that their own server is not allowed to connect to the internet itself due to security restrictions so I can''t do the image grabbing on the server side, it has to be done on the client and then posted to the server - presumably using some sort of Javascript/AJAX. So what would be the best solution to do this? I''m wondering if it could maybe be done using a combination of Javascript and IFrames?

I could of course just require the user to save the image down to their own local drive, and then browse to it using a standard ''asp:FileUpload'' control - but they don''t want that, they just want to paste the URL into the textbox and then it saves to the server automatically.

I am also restricted to using only IE 8.0 as this is an internal application and they don''t support other browsers.

Any help much appreciated!

Nick

推荐答案

上传图片使用C＃，JavaScript和ASP.NET 2.0客户端回调 [ ^ ]

ASP.NET-使用JavaScript和C＃加载图像上传文件 [ ^ ]

如何使用ASP.NET上传图像 [ ^ ]

Upload Images Using C#, JavaScript and ASP.NET 2.0 Client Callbacks[^]
ASP.NET - Upload File With Loading Image using JavaScript and C#[^]
How to upload an image using ASP.NET[^]

好的，经过大量的研究，我已经回答了我自己的问题并且来到了结论是这不能在IE8中完成。



我认为最可行的解决方案是将图像加载到页面上隐藏的DIV中，然后在发布之前使用第三方插件抓取它使用AJAX到服务器。这种方法似乎有可能 - 但不使用IE8。



有一个非常有用的名为HTML2Canvas的库，它使用HTML5的''canvas'元素完成了这一点 - 当然，这仅适用于其他FF和Safari等浏览器，以及9或以上的IE版本。如此处的示例页面所示，当通过IE8运行时，库提供对象不支持此属性或方法：



http://html2canvas.hertzen.com [ ^ ]



显然有办法解决这个问题，因为还有其他库在IE8中成功模拟了相同的画布功能 - 最值得注意的是谷歌的资源管理器画布，以及FlashCanvas。但是虽然这些都提供了普通HTML5画布所带来的大部分功能，但它们并没有提供所谓的toDataURL所需的关键功能 - 它允许您从屏幕抓取画布。尽管FlashCanvas现在声称支持这个功能，但已经尝试了几个小时我确信这不能用于HTML2Canvas以达到我需要它的目的。



在其他论坛上浏览过，似乎其他人在尝试使这个解决方案工作时也遇到了问题，所以现在我必须要统治它出来并设计一些其他方式。希望这可能对尝试同样事情的其他人有用。





干杯





Nick

OK, after much research, I''ve answered my own question and come to the conclusion that this can''t be done in IE8.

The solution that I thought would be most viable would be to load the image into a hidden DIV on the page and then grab it using a third party plugin before posting it to the server using AJAX. And this method DOES seem possible - but not using IE8.

There''s a very useful library called HTML2Canvas which does exactly that, using the ''canvas'' element of HTML5 - but of course, this only works on other browsers like FF and Safari, and IE versions of 9 or above. As seen on the examples page here, the library gives an "Object doesn''t support this property or method" when run through IE8:

http://html2canvas.hertzen.com[^]

There are apparently ways around this, as there are other libraries out there that successfully emulate the same canvas functionailty in IE8 - most notably Google''s ''Explorer Canvas'', and also ''FlashCanvas''. But while these both provide the majority of functions you get with a normal HTML5 canvas, they do not provide the critical function required called ''toDataURL'' - which allows you to grab the canvas from the screen. Even though FlashCanvas now claims to support this function, having tried it for several hours I''m convinced that this cannot be used with HTML2Canvas for the purpose I need it for.

Having browsed around on other forums, it seems that other people are also having problems trying to get this solution working, and so for now I''ll have to rule it out and devise some other way round it. Hopefully this might be of some use to anyone else attempting the same thing.


Cheers


Nick

这篇关于使用Javascript上传图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！