Question

有没有人知道可以向我显示以下内容的任何项目/演示等，

单击页面上的“上传图像”链接，将显示一个jQuery模式对话框，其中包含一个表单，该表单允许用户从计算机上载图像或指定Web上图像的链接。然后图像被ajax上传，它在模态对话框上显示一个缩略图，之后用户点击图像，模态对话框消失，相应的html片段被插入到textarea（我在这里使用TinyMce）。

这几乎就是WordPress的功能，但WordPress太复杂了，无法学习。有没有人知道一个更容易的样本，最好是一个ASP.NET MVC应用程序，或者有人能指出我需要做什么吗？

Answer 1

首先，您可以使用uploadify插件：http://www.uploadify.com/

上传文件时有一些事件。实施这些活动并在这里完成工作。

希望这有帮助

Answer 2

好的，这将是一个漫长的过程。正如已经提到的 - 你不能通过AJAX直接上传，但你肯定可以通过发布到隐藏的iFrame伪造行为。

出于本演示的目的，我将使用模式的jQuery blockUI插件...文件上传组件并不重要。基本过程是：

弹出模态并显示常规上传对话框
使用表单帖子定位隐藏的iFrame。禁用关闭模式的功能。
上传完成后（在脚本末尾）重新调用一个调用父框架中的函数的标记。
父框架中的函数获取新图像的URL并对模态的主体执行.append（）并重新启用关闭模态的功能。

虽然这不是一个完整的应用程序 - 它应该为您提供所需的基础。如果你需要100％的东西......好吧，这比我现在花费更多的时间，因为我只是将我现有的一些代码用于你的生活。

模态的消息部分（包括iFrame）：

<div id="UploadDrivers">
  <a href="#" onclick="$('#UploadForm').toggle();return false;" title="Upload New Image">
  <img src="/upload.gif" title="Upload New Image" />Upload New Image</a>
    <div id="UploadForm" style="display:none;text-align:right;">
      <form method="post" enctype="multipart/form-data" style="display:inline;"
         action="/uploadLogic.aspx" target="FileUpload"
         onsubmit="$('#UploadDrivers').hide(); $('#UploadStatus').show();">
           <input type="hidden" name="CALLBACK" value="uploadCallback" />
           <input type="file" name="FILE_NAME" />
           <input type="submit" value="Upload Image"  
             onclick="return $('input[name=FILE_NAME]', '#UploadForm').val() != '';"/>
        </form>
      </div>
      <iframe id="FileUpload" name="FileUpload" src="javascript:false;" style="width:1px;height:1px;border:none;"></iframe>
    </div>
    <div style="text-align:center;display:none;" id="UploadStatus">
      Uploading file.... <img src="busy.gif" title="Uploading..." />
    </div>
</div>

您的上传页面（在这种情况下为uploadLogic.aspx）：


\\Whatever logic you need for your situation to upload a file goes here
script language="javascript" type="text/javascript">
    function init(){
        var bError = ; //boolean from the upload
        var fileGuid = ""; //guid of file on server
        var msg = ""; //message to display on callback
        var fileName = "" //for friendly display of original name
        if(top.) {
            top.(bError, guid, filename, msg) 
            //callback function passed to this page to allow it to be more 'universal'
        }
    }
/script>

最后但并非最不重要......主页面有一个显示模态的链接和一个像


  function uploadCallback(error, guid, filename, message) {
    if(error) { alert("There was an error uploading the file:\r\n\r\n" + message); return; }
    $("#UploadDrivers").append(");
    //do whatever else
    }

...这些是重要的一点 - 您可能想要使用文件扩展名或更酷的UI内容，但这些是可以用JS完成的基础知识。

Answer 3

无法通过ajax上传图片。在弹出式div中使用iframe

Answer 4

您需要使用闪存才能执行此操作。这并不意味着你需要学习闪光灯。

使用Uploadify或SwfUpload等组件（uploadify建立在SwfUpload上）。

注意：在HTTP状态代码方面，Flash存在一些奇怪的问题。我已经得到它（以及一个相关的奇怪的CURL错误），涵盖on my site。

在此期间，请确保您知道自己在做什么。上传系统很容易搞砸，导致服务器中出现大量安全漏洞。相信我，我已经完成了（安全地实施）它，这是安全性方面最困难的部分之一。

使用jQuery模式对话框示例上传图像

4 个答案: