对,在与各种所见即所得编辑器合作多年后,我实际上正在考虑购买 imperavi 的编辑器所见即所得编辑器 ( http://imperavi.com/redactor/ ),但是我正在尝试使用试用版和经典 ASP为了使用脚本的图像/文件上传功能,目前图像/文件上传功能是用 PHP/JSON 编写的,并且很想将它们重写为 Classic ASP。
我将尝试在下面尽可能多地发布代码:
带有编辑器所见即所得的 HTML 表单
<!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));
}
?>
数据 JSON 文件- (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" }
]
额外的信息:
起初我无法让图像库显示任何图像,再次浏览stackoverflow后我发现:(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”的新页面,它基本上是“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”的新页面,它与原始 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
%>
现在我被困在哪里了,谢谢
如果您需要更多信息,请询问,我会尽快更新
伊万·赫肯伯格
更新:16/01/2013
我已按照“ulluoink”的说明将代码修改为以下内容,但实际上传图像仍然没有运气。<% ' 这是一个简化的例子,不包括上传图片的安全性。' 这个例子只是演示了 Classic 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 的错误处理,一点运气都没有。
更新时间:2013 年 1 月 16 日
好的,所以找到 image_upload.asp 页面时出错了,这很蹩脚;(在安装 firebug 并将 404 错误修复到 image_upload.asp 后,我在 firebug 控制台中发现了一个新错误:
TypeError: rawString.match(...) 为 null [中断此错误]
var 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', '');
},
更新和最终结果:18/01/2013
再次在'ulluoink'的帮助下,他向我指出上传脚本中的路径让我很头疼,很明显Firebug调试工具将成为我在调试像json这样的脚本时使用的工具,我这个调试器一直得到答案这一事实给我留下了深刻的印象,感谢'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
%>