そうです、さまざまな wysiwyg エディターを何年も使用した後、実際には imperavi の redactor wysiwyg エディター ( http://imperavi.com/redactor/ ) を購入することを考えていますが、トレイル バージョンと Classic ASP をいじろうとしています。スクリプトの画像/ファイル アップロード機能を使用するために、現在、画像/ファイル アップロード機能は PHP/JSON で記述されており、Classic ASP に書き直したいと考えています。
以下にできるだけ多くのコードを投稿しようとします。
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 イメージアップロード スクリプト- (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" }
]
追加情報：
最初は、画像ライブラリに画像を表示させることができませんでしたが、スタックオーバーフローをブラウズした後、次のことがわかりました: ( 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.
これを行った後、「画像を挿入」ボタンをクリックして、オプションを選択してサーバー上の実際の画像を見ることができました。
ここで、上記を Classic 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>
次に、元の PHP バージョンの「image_upload.php」と同じディレクトリにある「image_upload.asp」という新しいページを作成しました。
従来の 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 のプロセスの背後にあるロジックを示しているだけです
' 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
%>