Right, after years working with various wysiwyg editor, i'm actual thinking of purchasing the imperavi's redactor wysiwyg editor (http://imperavi.com/redactor/), however i'm trying to fiddle about with the trail version and Classic ASP in order to use the image/file upload functionality of the script, Currently the image/file upload functions are written in PHP/JSON, and would love to rewrtie them into Classic ASP.
多年来处理不同的所见即所得编辑器,我实际想购买imperavi编辑者所见即所得的编辑器(http://imperavi.com/redactor/),然而我想小提琴与跟踪版本和经典ASP为了使用图像/脚本的文件上传功能,目前的图像/都写在PHP / JSON文件上传功能,并愿意rewrtie成典型的ASP。
I will try to post the code as much as possible below:
我会尽量在以下张贴守则:
HTML FORM WITH REDACTOR WYSIYWG
使用REDACTOR WYSIYWG创建的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 IMAGE UPLOAD SCRIPT - (imageUpload: '../demo/scripts/image_upload.php')
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 FILE - (imageGetJson: '../demo/json/data.json')
数据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" }
]
Extra Information:
额外信息:
At first I couldn't get the image library to display any images, again after browsing * i found: (Get IIS6 to serve JSON files (inc. POST,GET)?) which said:
首先，我无法让图像库显示任何图像，在浏览*后，我发现:(获取IIS6来服务JSON文件(inc. POST, get ?)
By default, IIS in W2K3 and above won't serve files that aren't of a MIME type that it knows about (instead returning 404 errors).
默认情况下，W2K3和以上的IIS将不会提供它所知道的MIME类型的文件(而不是返回404错误)。
You need to add a MIME type to IIS to allow it to serve that type of file. You can set it at the site level or at the server level.
您需要向IIS添加一个MIME类型，以允许它为该类型的文件提供服务。您可以在站点级别或服务器级别设置它。
To set this for the entire server:
为整个服务器设置此参数:
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.
After doing this i was able to click on the 'insert image' button and see the actual images on the server with the option choose.
这样做之后，我就可以单击“插入图像”按钮，并使用所选选项查看服务器上的实际图像。
Now i need to start re-writting the above above into Classic ASP.
现在我需要重新编写上面的经典ASP。
For the purpose of this question , I created a new page called: 'all_uploads_classic_asp.html' which is basicly a copy of 'all_uploads.html' with some amended code, please see my changes to the code below:
为了解决这个问题，我创建了一个名为“all_uploads_classic_asp”的新页面。html'是'all_upload '的拷贝。html“有一些修改后的代码，请参阅我对以下代码的修改:
original version:
原始版本:
<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>
amended version:
修改版:
<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>
Then I created a new page called 'image_upload.asp', which is in the same directory as the original PHP version 'image_upload.php'
然后我创建了一个名为“image_upload”的新页面。它和原来的PHP版本image_upload.php在同一个目录下
CLASSIC ASP UPLOAD SCRIPT
经典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
%>
Now i'm stuck where to go next, thanks
现在我被困在了接下来要去的地方，谢谢
If you need more info please ask and i will update asap
如果你需要更多的信息，请询问，我会尽快更新
Iwan Hekkenberg
伊万Hekkenberg
UPDATE: 16/01/2013
更新:16/01/2013
I have followed the instructions of 'ulluoink' to amend the code to the following, however still no luck with actual uploading of the image. <% ' 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)
我已经按照“ulluoink”的指示将代码修改为如下，但是仍然无法实际上传图片。<% '这是一个简化的示例，不涉及上传图像的安全性。这个例子展示了我写的经典ASP背后的逻辑。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
%>
How could one debug this if nothing is happening or showing any signs of errors? I can't seem to find anything in the log files either.
如果什么都没有发生，或者显示出任何错误的迹象，那么如何调试呢?我似乎也在日志文件中找不到任何东西。
PS: the above code has been amended. I removed error handling for classic asp, no luck at all.
以上代码已修改。我删除了经典asp的错误处理，一点运气都没有。
UPDATED: 16/01/2013
更新:16/01/2013
Ok, so there was a error with finding the image_upload.asp page, which was pretty lame ;(, after installing firebug and retifying the 404 error to the image_upload.asp, I found a new error within the firebug console:
找到image_upload有一个错误。在安装firebug并将404错误重新设置到image_upload之后，asp页面就变得很差劲了。我在firebug控制台发现了一个新的错误:
TypeError: rawString.match(...) is null [Break On This Error]
TypeError: rawString.match(…)为空[中断此错误]
var jsonString = rawString.match(/{(.|\n)*}/)[0];
var jsonString = rawString.match(/ {(. | \ n)* } /)[0];
Which refers to the redactor.js file: (http://demo.devcentral.co.uk/wysiwyg/redactor/redactor.js)
指的是编辑器。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', '');
},
Update and final result: 18/01/2013
更新和最终结果:18/01/2013
Once again with the help of 'ulluoink', who pointed out to me that the path in the upload script was providing me the headaches, it become clear that Firebug debugging tool is going to be my tool to use while debugging scripting like json, I was very impresed by the fact that this debugger was given the answer allong, thanks 'ulluoink' for helping me out with this problem.
再次“ulluoink”的帮助下,他向我指出,上传脚本的路径是提供我的头痛,它变得明显,Firebug调试工具是我的工具使用json等调试脚本,我被这个调试器很座右铭给答案分享,感谢“ulluoink”帮我出了这个问题。
below I will post the final code I have used to let this work:
下面我将发布我用来让这个工作的最终代码:
Final Redactor (WYSIWYG) - image_upload.asp
最终编辑器(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 个解决方案
#1
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 & """ }"
you could use a class like this for json generation...
您可以对json生成使用这样的类……
#1
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 & """ }"
you could use a class like this for json generation...
您可以对json生成使用这样的类……