jcy2004x的asp图片上传自定义存储位置处理笔记

主题: jcy2004x的asp图片上传自定义存储位置处理笔记

作者: 中国帝购网络, 发布日期: 2009-03-12 00:23:46, 浏览数: 6614

<%OPTION EXPLICIT%>
<!--#include FILE="upfile_class.asp"-->
<%
Server.ScriptTimeOut=9000
dim upfile,formPath,ServerPath,FSPath,formName,FileName,oFile,upfilecount,TmpPath
upfilecount=0

set upfile=new upfile_class ''建立上传对象
upfile.NoAllowExt="asp;exe;htm;html;aspx;cs;vb;js;" '设置上传类型的黑名单
upfile.GetData (10240000) '取得上传数据,限制最大上传10M
%>
<html>
<head>
<title>文件上传</title>
<style type="text/css">
<!--
.p9{ font-size: 9pt; font-family: 宋体 }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body leftmargin="20" topmargin="20" class="p9">
<hr size=1 noshadow width=300 align=left>
<%
if upfile.isErr then '如果出错
select case upfile.isErr
case 1
Response.Write "你没有上传数据?"
case 2
Response.Write "你上传的文件超出我们的限制,最大10M"
end select
else
'Response.Write(upfile.isErr)
%>
<%
FSPath=GetFilePath(Server.mappath("upfile.asp"),"\")'取得当前文件在服务器路径
ServerPath=GetFilePath(Request.ServerVariables("HTTP_REFERER"),"/")'取得在网站上的位置

FSPath=FSPath & "UpLoadPicFile\"
for each formName in upfile.file '列出所有上传了的文件
set oFile=upfile.file(formname)
FileName=upfile.form(formName)'取得文本域的值
if not FileName>"" then FileName=oFile.filename'如果没有输入新的文件名,就用原来的文件名
upfile.SaveToFile formname,FSPath&FileName ''保存文件 也可以使用AutoSave来保存,参数一样,但是会自动建立新的文件名
'Response.write(FSPath&FileName)
%>
文件名称：<%=oFile.FilePath&oFile.FileName%><br> <!--随机生成个文件名-->
文件大小：<%=oFile.filesize%> KB <br>
<%
TmpPath=GetFilePath(Request.ServerVariables("HTTP_REFERER"),"/src/plugins/")
TmpPath=TmpPath & "FileUpLoad/UpLoadPicFile/" & oFile.FileName
if upfile.iserr then 
Response.Write upfile.errmessage
else
upfilecount=upfilecount+1
Response.Write "上传成功"
end if
%>
<%
set oFile=nothing
next

end if

Response.write "<script type=text/javascript>parent.KE.plugin[""image""].insert("""&upfile.form("id")&""","""&TmpPath&""","""&upfile.form("imgTitle")&""","""&upfile.form("imgWidth")&""","""&upfile.form("imgHeight")&""","""&upfile.form("imgBorder")&""");</script>"
set upfile=nothing '删除此对象
Response.End()
%>
</body>
</html>
<%
function GetFilePath(FullPath,str)
If FullPath <> "" Then
GetFilePath = left(FullPath,InStrRev(FullPath, str))
Else
GetFilePath = ""
End If
End function
%>

以上是 jcy2004x 的asp图片上传图片代码原文

为了达到自定义存储目录的目的，我们需要对以下代码进行修改：

第39行更改为：

FSPath=GetFilePath(FSPath,"\editor\asp\")        '这里的“\editor\asp\”为你存放上传组件文件的位置；
FSPath=FSPath&"uppic\"&upfile.form("imageP") & "\"

'这里的“uppic”为你存储图片总目录，“upfile.form("imageP")"是用来接收提交表单中设置的图片存储目录值；

第51行更改为：

TmpPath=TmpPath & "../../uppic/"&upfile.form("imageP")&"/" & oFile.FileName

这里的 TmpPath 主要是用于向编辑器的编辑区传递图片被存储路径。
而 ../../uppic/ 中的 “../../”目的在于将传递到编辑区的图片路径调整到根目录下的 “uppic”（当然，如果你的uppic不在根目录也可以通过这里来指定它的位置）
“upfile.form("imageP")” 则是前面提到的你在表单中定义的图片存储文件夹了。

OK，现在对 SAVETOFILE.ASP 的更改结束。

接下来，我们建立一个新的 KINDEDITOR 添加图片插件：

找到 plugins 目录，将里面的 image.html 复制粘贴修改文件名为你想要的，这里我们修改成 image_news.html，对代码进行修改。

找到

  <form name="uploadForm" method="post" enctype="multipart/form-data" action="../asp/savetofile.asp">
    <input type="hidden" id="editorId" name="id" value="" />

在后面增加

    <input type="hidden" id="imageP" name="imageP" value="news"/>

这里的id “imageP” 就是我们在 savetofile.asp 中使用到的 upfile.form("imageP") 这两个 imageP 必须相同。
这里的value “news” 则是我们要存储图片的目录（名字你可以随便起，但是在完成全部操作之后，记得一定要在网站中建立一个这样名字的文件夹，否则上传的图片就找不到家了：））

OK，又一项工作完成了。

下面我们再要做的就是在调用编辑器的页面中定义新的插件并让编辑器调用我们定义的插件了！
这一点，已经有演示程序，我就不多说了！大家自己看吧
http://www.kindsoft.net/ke/examples/demo-18.html

最后，向jcy2004x表示由衷的感谢，因为是他给了我很大的帮助完成了这项工作！
另外，向无意中读完此文的前辈们表示抱歉，因为这篇文章对您一点用都没有！
同时，希望这篇文章能对初学者有所帮助，希望我们互相学习，早日成为“达人”！呵呵！

已过午夜，时间仓促，就此完结，OVER！！！

作者: jcy2004x, 发布日期: 2009-03-12 09:57:01

关于自定义功能的补充

1 在src\skins\default.gif 文件，用PS加入一个图标 16*16 像素的。并记下高度

2 在编辑器调用文件下，加入以下样式

<style>

.ke-icon-image2 {

background-image: url(KindEditor/src/skins/default.gif);

background-position: 0px -496px; /* 这里是记下的高度 */

width: 16px;

height: 16px;

}

</style>

3 我的编辑器调用JS

KE.show({

id : 'content1',

skinType: 'tinymce',

cssPath : 'KindEditor/Css/index.css',

items : [

'undo', 'redo', 'cut', 'copy', 'paste',

'plainpaste', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright',

'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

'superscript', 'date', 'time', 'specialchar', 'emoticons', 'link', 'unlink', '-',

'title', 'fontname', 'fontsize', 'textcolor', 'bgcolor', 'bold',

'italic', 'underline', 'strikethrough', 'removeformat', 'selectall', 'image',

'layer', 'table', 'hr','image2'

]

});

//编辑器中自定义调用的方法 image2

</script>

4 在编辑器目录中找到 src\skins\plugin-all.js 文件并加入自定义方法

KE.plugin['image2'] = {

click : function(id) {

KE.util.selection(id);

var dialog = new KE.dialog({

id : id,

cmd : 'image2', // image2 为你的自定义方所调用的文件这个文件的名称为 image2.html

width : 310,

height : 90,

title : KE.lang['image'],

yesButton : KE.lang['yes'],

noButton : KE.lang['no']

});

dialog.show();

check : function(id) {

var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);

var type = KE.$('type', dialogDoc).value;

var url = '';

if (type == 1) {

url = KE.$('imgFile', dialogDoc).value;

} else {

url = KE.$('url', dialogDoc).value;

}

var width = KE.$('imgWidth', dialogDoc).value;

var height = KE.$('imgHeight', dialogDoc).value;

var border = KE.$('imgBorder', dialogDoc).value;

if (url.match(/\.(jpg|jpeg|gif|bmp|png)$/i) == null) {

alert(KE.lang['invalidImg']);

window.focus();

KE.g[id].yesButton.focus();

return false;

}

if (width.match(/^\d+$/) == null) {

alert(KE.lang['invalidWidth']);

window.focus();

KE.g[id].yesButton.focus();

return false;

}

if (height.match(/^\d+$/) == null) {

alert(KE.lang['invalidHeight']);

window.focus();

KE.g[id].yesButton.focus();

return false;

}

if (border.match(/^\d+$/) == null) {

alert(KE.lang['invalidBorder']);

window.focus();

KE.g[id].yesButton.focus();

return false;

}

return true;

exec : function(id) {

KE.util.select(id);

var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);

var type = KE.$('type', dialogDoc).value;

if (!this.check(id)) return false;

if (type == 1) {

KE.$('editorId', dialogDoc).value = id;

dialogDoc.uploadForm.submit();

return false;

} else {

var url = KE.$('url', dialogDoc).value;

var title = KE.$('imgTitle', dialogDoc).value;

var width = KE.$('imgWidth', dialogDoc).value;

var height = KE.$('imgHeight', dialogDoc).value;

var border = KE.$('imgBorder', dialogDoc).value;

this.insert(id, url, title, width, height, border);

}

insert : function(id, url, title, width, height, border) {

var html = '<img src="' + url + '" ';

if (width > 0) html += 'width="' + width + '" ';

if (height > 0) html += 'height="' + height + '" ';

if (title) html += 'title="' + title + '" ';

html += 'alt="' + title + '" ';

html += 'border="' + border + '" />';

KE.util.insertHtml(id, html);

KE.layout.hide(id);

KE.util.focus(id);

}

};

// 以上方法为，自定义插入图片的功能

5 找到 src\lang\zh_CN.js 并在

KE.lang = { 下加入 image2 : '插入图片',

以下，再加入楼主的的笔记就可实现自定义功能

作者: 中国帝购网络, 发布日期: 2009-03-12 11:25:55

姜，还是老的辣啊！：）呵呵！

JCY2004X 写的就是够专业！：）呵呵！

向你学习.......

论坛 Forum