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
%>
當我嘗試上傳圖像時，我得到一個http 404錯誤image_upload.asp沒有找到...你可以使用螢火蟲，看看發生了什麼 – ulluoink
好吧，已安裝螢火蟲，可以看到更多細節，我已解決404錯誤，這是一個時刻，但仍然沒有運氣，我發現一個新的錯誤 – DevCentral
我得到這個錯誤：Persits.Upload.1錯誤'800a0005' 系統找不到指定的路徑。 /wysiwyg/demo/scripts/image_upload.asp，第20行 – ulluoink