2013-01-12 155 views
3

对,经过多年与各种wysiwyg编辑工作,我真的想购买imperavi的编辑器wysiwyg编辑器(http://imperavi.com/redactor/),但我试图摆弄与路径版本和经典ASP为了使用脚本的图像/文件上传功能,目前图像/文件上传功能是用PHP/JSON编写的,并且很想将它们改写成经典的ASP。编辑器(Wysiwyg编辑器)/图片上传/经典ASP/JSON

我会尝试张贴代码尽可能如下可能:

HTML形式主编WYSIYWG

<!DOCTYPE html> 
<html> 
<head> 
    <title>All uploads</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="../css/style.css" />  
    <link rel="stylesheet" href="../redactor/redactor.css" /> 
    <script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script> 
    <script src="../redactor/redactor.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(
     function() 
     { 
      $('#redactor_content').redactor({ 
       imageUpload: '../demo/scripts/image_upload.php', 
       fileUpload: '../demo/scripts/file_upload.php', 
       imageGetJson: '../demo/json/data.json' 
      }); 
     } 
    ); 
    </script>    
</head> 

<body> 
    <div id="page"> 
    <textarea id="redactor_content" name="content"> 
     <h2>Hello and Welcome</h2> 
     <p>I never did quite grasp him, though he endeavored to explain it to me upon numerous occasions. I suggested telepathy, but he said no, that it was not telepathy since they could only communicate when in each others' presence, nor could they talk with the Sagoths or the other inhabitants of Pellucidar by the same method they used to converse with one another.</p> 
     <p>"What they do," said Perry, "is to project their thoughts into the fourth dimension, when they become appreciable to the sixth sense of their listener. Do I make myself quite clear?"</p> 
     <p>"You do not, Perry," I replied. He shook his head in despair, and returned to his work. They had set us to carrying a great accumulation of Maharan literature from one apartment to another, and there arranging it upon shelves. I suggested to Perry that we were in the public library of Phutra, but later, as he commenced to discover the key to their written language, he assured me that we were handling the ancient archives of the race.</p> 
     <p>During this period my thoughts were continually upon Dian the Beautiful. I was, of course, glad that she had escaped the Mahars, and the fate that had been suggested by the Sagoth who had threatened to purchase her upon our arrival at Phutra. I often wondered if the little party of fugitives had been overtaken by the guards who had returned to search for them. Sometimes I was not so sure but that I should have been more contented to know that Dian was here in Phutra, than to think of her at the mercy of Hooja the Sly One. Ghak, Perry, and I often talked together of possible escape, but the Sarian was so steeped in his lifelong belief that no one could escape from the Mahars except by a miracle, that he was not much aid to us—his attitude was of one who waits for the miracle to come to him.</p> 
    </textarea> 
    </div>      
</body> 
</html> 

PHP图片上传脚本 - (imageUpload:” ../demo /scripts/image_upload.php')

<?php 

// This is a simplified example, which doesn't cover security of uploaded images. 
// This example just demonstrate the logic behind the process. 


// files storage folder 
$dir = '/home/web/sitecom/images/'; 

$_FILES['file']['type'] = strtolower($_FILES['file']['type']); 

if ($_FILES['file']['type'] == 'image/png' || $_FILES['file']['type'] == 'image/jpg' || $_FILES['file']['type'] == 'image/gif' || $_FILES['file']['type'] == 'image/jpeg' || $_FILES['file']['type'] == 'image/pjpeg') 
{ 
    // setting file's mysterious name 
    $filename = md5(date('YmdHis')).'.jpg'; 
    $file = $dir.$filename; 

    // copying 
    copy($_FILES['file']['tmp_name'], $file); 

    // displaying file  
    $array = array(
     'filelink' => '/images/'.$filename 
    ); 

    echo stripslashes(json_encode($array)); 

} 

?> 

DATA JSON FIL Ë - (imageGetJson: '../demo/json/data.json')

[ 
    { "thumb": "json/images/1_m.jpg", "image": "json/images/1.jpg", "title": "Image 1", "folder": "Folder 1" }, 
    { "thumb": "json/images/2_m.jpg", "image": "json/images/2.jpg", "title": "Image 2", "folder": "Folder 1" }, 
    { "thumb": "json/images/3_m.jpg", "image": "json/images/3.jpg", "title": "Image 3", "folder": "Folder 1" }, 
    { "thumb": "json/images/4_m.jpg", "image": "json/images/4.jpg", "title": "Image 4", "folder": "Folder 1" }, 
    { "thumb": "json/images/5_m.jpg", "image": "json/images/5.jpg", "title": "Image 5", "folder": "Folder 1" }, 
    { "thumb": "json/images/1_m.jpg", "image": "json/images/1.jpg", "title": "Image 6", "folder": "Folder 1" }, 
    { "thumb": "json/images/2_m.jpg", "image": "json/images/2.jpg", "title": "Image 7", "folder": "Folder 1" }, 
    { "thumb": "json/images/3_m.jpg", "image": "json/images/3.jpg", "title": "Image 8", "folder": "Folder 1" }, 
    { "thumb": "json/images/4_m.jpg", "image": "json/images/4.jpg", "title": "Image 9", "folder": "Folder 1" }, 
    { "thumb": "json/images/5_m.jpg", "image": "json/images/5.jpg", "title": "Image 10", "folder": "Folder 2" }, 
    { "thumb": "json/images/1_m.jpg", "image": "json/images/1.jpg", "title": "Image 11", "folder": "Folder 2" }, 
    { "thumb": "json/images/2_m.jpg", "image": "json/images/2.jpg", "title": "Image 12", "folder": "Folder 2" } 
] 

额外的信息:

起初,我不能让图像库显示任何图像,我发现:(Get IIS6 to serve JSON files (inc. POST,GET)?)其中说:

默认情况下,W2K3及以上版本的IIS将不提供非知道的MIME类型的文件(而是返回404错误)。

您需要将一个MIME类型添加到IIS以允许它提供该类型的文件。您可以在网站级别或服务器级别进行设置。

要设置这整个服务器:

Open the properties for the server in IIS Manager and click MIME Types 
Click "New". Enter "JSON" for the extension and "application/json" for the MIME type. 

这样做我能点击“插入图片”按钮,看到该选项选择服务器上的实际影像后。

现在我需要开始重新写上述经典ASP。

对于这个问题的目的,我创建了一个名为新的一页:“all_uploads_classic_asp.html”,这是basicly“all_uploads.html”的一些修改代码,请看到我的改变如下代码:

原始版本:

<script type="text/javascript"> 
    $(document).ready(
     function() 
     { 
      $('#redactor_content').redactor({ 
       imageUpload: '../demo/scripts/image_upload.php', 
       fileUpload: '../demo/scripts/file_upload.php', 
       imageGetJson: '../demo/json/data.json' 
      }); 
     } 
    ); 
    </script> 

修正版本:

<script type="text/javascript"> 
    $(document).ready(
     function() 
     { 
      $('#redactor_content').redactor({ 
       imageUpload: '../demo/scripts/image_upload.asp', 
       fileUpload: '../demo/scripts/file_upload.asp', 
       imageGetJson: '../demo/json/data.json' 
      }); 
     } 
    ); 
    </script> 

然后,我创建了一个新的一页名为 'image_upload.asp',这是在同一个直接ory作为原始的PHP版本'image_upload。PHP的”

传统的ASP上传脚本

<% 
' This is a simplified example, which doesn't cover security of uploaded images. 
' This example just demonstrate the logic behind the process in Classic ASP 
' Written by I.Hekkenberg (DevCentral) 

' files storage folder and path 
Dim MySaveFolder, MySaveFolderPath 
    MySaveFolder  = "../demo/json/images/" 
    MySaveFolderPath = "d:\internet\root\www\devcentral.co.uk\wwwroot\demo\wysiwyg\demo\json\images\" 

' Server/Script Timeout for storage larger images 
    Server.ScriptTimeout = 1200 
    Set objUpload = Server.CreateObject("Persits.Upload") 
     On Error Resume Next 
     objUpload.OverwriteFiles = False 
     objUpload.SetMaxSize 5242880 ' Limit files to 5MB 
     objUpload.SaveVirtual(MySaveFolder) 

     ' display error message 
     If Err <> 0 Then 
      Response.Write "<br />ERROR file uploading: " & Err.Description & " | " & MySaveFolder 
      Err.Clear 
     ' no error occured so continue as normal 
     Else 
      ' ====================================================== 
      ' HELP NEEDED WITH REWRITTING THE BELOW INTO CLASSIC ASP 
      '              
      ' // displaying file         
      ' $array = array(          
      ' 'filelink' => '/images/'.$filename     
      ' );             
      ' echo stripslashes(json_encode($array));    
      '              
      ' ====================================================== 
     End If 
    Set objUpload = Nothing 
%> 

现在我卡住了下一步去哪里,谢谢

如果您需要更多信息请咨询,我会尽快更新

Iwan Hekkenberg

UPDATE:16/01/2013

我按照'ulluoink'的指示将代码修改为以下内容,但实际上传图片仍然没有运气。 <% '这是一个简单的例子,不包括上传图片的安全性。 “这个例子只是演示在传统的ASP 过程背后的逻辑”撰稿I.Hekkenberg(DevCentral)

' files storage folder and path 
Dim MySaveFolder, MySaveFolderPath 
    MySaveFolder  = "../demo/json/images/" 
    MySaveFolderPath = "D:\internet\root\www\devcentral.co.uk\wwwroot\demo\wysiwyg\demo\json\images\" 

    ' Server/Script Timeout for storage larger images 
    Server.ScriptTimeout = 1200 
    Set objUpload = Server.CreateObject("Persits.Upload") 
     objUpload.OverwriteFiles = False 
     objUpload.SetMaxSize 5242880 ' Limit files to 5MB 
     objUpload.SaveVirtual(MySaveFolder) 

     ' ====================================================== 
     ' HELP NEEDED WITH REWRITTING THE BELOW INTO CLASSIC ASP 
     '              
     ' // displaying file         
     ' $array = array(          
     ' 'filelink' => '/images/'.$filename     
     ' );             
     ' echo stripslashes(json_encode($array));    
     '              
     ' ====================================================== 
     ' Amended code by 'ulluoink' 
     ' write json back to client 
     with response 
      .codePage = 65001 
      .charset = "utf-8" 
      .contentType = "application/json" 
     end with 

     For Each File in objUpload.Files 
      response.write "{ ""filelink"": """ & MySaveFolder & "/" & File.FileName & """ }" 
     Next 
     ' ====================================================== 
    Set objUpload = Nothing 
%> 

怎会调试这一点,如果什么也没发生或显示错误的迹象?我似乎无法在日志文件中找到任何内容。

PS:上面的代码已被修改。我删除了经典asp的错误处理,根本没有运气。

更新日期:16/01/2013

好了,有一个与寻找image_upload.asp页面,这是很蹩脚的一个错误;(,安装萤火后retifying 404错误的image_upload的.asp,我发现萤火控制台内的新的错误:

类型错误:rawString.match(...)为空 [打破该误差]

变种jsonString = rawString.match(/ {( 。| \ n)*} /)[0];

这是指redactor.js文件:(http://demo.devcentral.co.uk/wysiwyg/redactor/redactor.js

 uploadLoaded : function() 
     { 
      var i = $('#' + this.id)[0]; 
      var d; 

      if (i.contentDocument) 
      { 
       d = i.contentDocument; 
      } 
      else if (i.contentWindow) 
      { 
       d = i.contentWindow.document; 
      } 
      else 
      { 
       d = window.frames[this.id].document; 
      } 

      // Success 
      if (this.uploadOptions.success) 
      { 
       if (typeof d !== 'undefined') 
       { 
        // Remove bizarre <pre> tag wrappers around our json data: 
        var rawString = d.body.innerHTML; 
        var jsonString = rawString.match(/\{(.|\n)*\}/)[0]; 
        var json = $.parseJSON(jsonString); 

        if (typeof json.error == 'undefined') 
        { 
         this.uploadOptions.success(json); 
        } 
        else 
        { 
         this.uploadOptions.error(this, json); 
         this.modalClose(); 
        } 
       } 
       else 
       { 
        alert('Upload failed!'); 
        this.modalClose(); 
       } 
      } 

      this.element.attr('action', this.element_action); 
      this.element.attr('target', ''); 

     }, 

更新和最终的结果:与 'ulluoink' 的帮助下18/01/2013

再次,谁指出,对我来说,上传脚本中的路径给我带来了麻烦,很明显Firebug调试工具将成为我在调试像json这样的脚本时使用的工具,我被这个调试器给出答案的事实弄得很沮丧allong,感谢'ulluoink'帮助我解决这个问题。

下面我会后我已经习惯了让这项工作最终代码:

最终主编(WYSIWYG) - image_upload.asp

<% 
' This is a simplified example, which doesn't cover security of uploaded images. 
' This example just demonstrate the logic behind the process in Classic ASP 
' Written by I.Hekkenberg (DevCentral) 

' files storage folder and path 
Dim MySaveFolder : MySaveFolder  = "../json/images" 
    Server.ScriptTimeout = 1200 
    Set objUpload = Server.CreateObject("Persits.Upload") 
     objUpload.OverwriteFiles = False 
     objUpload.SetMaxSize 5242880 ' Limit files to 5MB 
     objUpload.SaveVirtual(MySaveFolder) 
     ' code below provide by 'ulluoink' 
     ' write json back to client 
     with response 
      .codePage = 65001 
      .charset = "utf-8" 
      .contentType = "application/json" 
     end with 

     For Each File in objUpload.Files 
      response.write "{ ""filelink"": ""json/images/" & File.FileName & """ }" 
     Next 
     ' ====================================================== 
    Set objUpload = Nothing 
%> 
+1

当我尝试上传图像时,我得到一个http 404错误image_upload.asp没有找到...你可以使用萤火虫,看看发生了什么 – ulluoink

+0

好吧,已安装萤火虫,可以看到更多细节,我已解决404错误,这是一个时刻,但仍然没有运气,我发现一个新的错误 – DevCentral

+1

我得到这个错误:Persits.Upload.1错误'800a0005' 系统找不到指定的路径。 /wysiwyg/demo/scripts/image_upload.asp,第20行 – ulluoink

回答

4
'create instance of uploaded file 
set File = objUpload.Files("file") 

' write json back to client 
with response 
    .codePage = 65001 
    .charset = "utf-8" 
    .contentType = "application/json" 
end with 

response.write "{ ""filelink"": """ & MySaveFolder & "/" & File.FileName & """ }" 

你可以使用这样一类用于json代的this ...

+0

感谢ulluoink,我会稍微捅一下上面的代码,并且我还会通读其他的参考链接,感谢迄今为止,我将尽快更新此主题 – DevCentral

+0

但是,我尝试了上面的代码,但仍然没有运气,我已经做了一些更新的帖子 – DevCentral