求助小浪子！缩略图思路

用户登录新用户注册

主题: 求助小浪子！缩略图思路

作者: 阿飞飞, 发布日期: 2012-11-04 13:50:42, 浏览数: 4251

通常我们使用批量上传都是靠' + data.url + '来获取上传地址

但是如果在上传过程中，我们需要自动生成缩略图，

而且也需要生成的缩略图可以输出到input里面。需要怎么处理呢？

也就是大图录入到一个input

缩略图录入到一个input

关键是怎么获取缩略图的地址

作者: 小浪子, 发布日期: 2012-11-04 20:35:04

白天不在哈。。其实很简单。

返回多个参数就是了。

默认是：

//成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

你也可以返回多个，如：

//成功时
{
        "error" : 0,
        "url" : "pic.jpg",
        "urls" : "pics.jpg"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

data.url是原图，data.urls是缩略图。

作者: 阿飞飞, 发布日期: 2012-11-05 00:36:46

回复小浪子：

在ASP的缩略图保存中一般都是这样保存的

 jpeg.save Replace(filePath, ".", "_s.") '保存到文件夹
jpeg.Close
Set Jpeg = Nothing ''''//注销组件，释放资源

关键是有什么办法获得这个缩略图的名字

fileUrl = saveUrl & file.filename

在这个地方给图片定义个名字的话，也只能定义图片名的前缀

fileUrlss = saveUrl & "s_" &file.filename

但是生成的缩略图只能定义图片名后。

最后能够data.urlss获取的文件名是这样

s_XXXXX.jpg

而上传的缩略图是

XXXXX_s.jpg

作者: 小浪子, 发布日期: 2012-11-05 08:27:48

回复阿飞飞：代码里面upload_json.asp

filePath = Server.mappath(savePath & file.filename)'取绝对路径
fileUrl = saveUrl & file.filename'取相对路径

自己看着处理。

作者: 小浪子, 发布日期: 2012-11-05 11:15:47

随便找了个生成缩略图的函数。进行了修改。

在examples文件下建立文件代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Upload Button Examples</title>
<link rel="stylesheet" href="../themes/default/default.css" />
<script src="../kindeditor-min.js"></script>
<script>
KindEditor.ready(function(K) {
    var uploadbutton = K.uploadbutton({
        button: K('#uploadButton')[0],
        fieldName: 'imgFile',
        url: '../asp/upload_json.asp?dir=image',
        afterUpload: function(data) {
            if (data.error === 0) {
                K('#url').val(data.url);
                K('#urls').val(data.urls);
            } else {
                alert(data.message);
            }
        },
        afterError: function(str) {
            alert('自定义错误信息: ' + str);
        }
    });
    uploadbutton.fileBox.change(function(e) {
        uploadbutton.submit();
    });
});
</script>
</head>
<body>
<div class="upload"> 大图：
  <input class="ke-input-text" type="text" id="url" value="" size="80" readonly="readonly" />
  <br>
  小图：
  <input class="ke-input-text" type="text" id="urls" value="" size="80" readonly="readonly" />
  <br>
  <input type="button" id="uploadButton" value="Upload" />
</div>
</body>
</html>

asp文件夹下面的upload_json.asp进行修改代码如下：

<%@ CODEPAGE=65001 %>
<% Option Explicit %>
<% Response.CodePage=65001 %>
<% Response.Charset="UTF-8" %>
<!--#include file="UpLoad_Class.asp"-->
<!--#include file="JSON_2.0.4.asp"-->
<%

' KindEditor ASP
'
' 本ASP程序是演示程序，建议不要直接在实际项目中使用。
' 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
'

Dim aspUrl, savePath, saveUrl, maxSize, fileName, fileExt, newFileName, filePath, fileUrl, dirName
Dim extStr, imageExtStr, flashExtStr, mediaExtStr, fileExtStr
Dim upload, File, fso, ranNum, hash, ymd, mm, dd, result

aspUrl = Request.ServerVariables("SCRIPT_NAME")
aspUrl = Left(aspUrl, InStrRev(aspUrl, "/"))

'文件保存目录路径
savePath = "../attached/"
'文件保存目录URL
saveUrl = aspUrl & "../attached/"
'定义允许上传的文件扩展名
imageExtStr = "gif|jpg|jpeg|png|bmp"
flashExtStr = "swf|flv"
mediaExtStr = "swf|flv|mp3|wav|wma|wmv|mid|avi|mpg|asf|rm|rmvb"
fileExtStr = "doc|docx|xls|xlsx|ppt|htm|html|txt|zip|rar|gz|bz2"
'最大文件大小
maxSize = 5 * 1024 * 1024 '5M

Set fso = Server.CreateObject("Scripting.FileSystemObject")
If Not fso.FolderExists(Server.mappath(savePath)) Then
    showError("上传目录不存在。")
End If

dirName = Request.QueryString("dir")
If IsEmpty(dirName) Then
    dirName = "image"
End If
If InStr(LCase("image,flash,media,file"), dirName) < 1 Then
    showError("目录名不正确。")
End If

Select Case dirName
    Case "flash" extStr = flashExtStr
    Case "media" extStr = mediaExtStr
    Case "file" extStr = fileExtStr
    Case Else extStr = imageExtStr
End Select

Set upload = New AnUpLoad
upload.Exe = extStr
upload.MaxSize = maxSize
upload.GetData()
If upload.ErrorID>0 Then
    showError(upload.Description)
End If

'创建文件夹
savePath = savePath & dirName & "/"
saveUrl = saveUrl & dirName & "/"
If Not fso.FolderExists(Server.mappath(savePath)) Then
    fso.CreateFolder(Server.mappath(savePath))
End If
mm = Month(Now)
If mm < 10 Then
    mm = "0" & mm
End If
dd = Day(Now)
If dd < 10 Then
    dd = "0" & dd
End If
ymd = Year(Now) & mm & dd
savePath = savePath & ymd & "/"
saveUrl = saveUrl & ymd & "/"
If Not fso.FolderExists(Server.mappath(savePath)) Then
    fso.CreateFolder(Server.mappath(savePath))
End If

Set File = upload.Files("imgFile")
If File Is Nothing Then
    showError("请选择文件。")
End If

Set result = File.saveToFile(savePath, 0, true)
If result.Error Then
    showError(File.Exception)
End If

' 变量：sPicPathName，获取保存后的图片名称，进行缩略图的操作改名
Dim sPicPathName
sPicPathName = saveUrl & Replace(File.filename, ".", "_s.")
' End
filePath = Server.mappath(savePath & File.filename)
fileUrl = saveUrl & File.filename

Set upload = Nothing
Set File = Nothing

If Not fso.FileExists(filePath) Then
    showError("上传文件失败。")
End If

Response.AddHeader "Content-Type", "text/html; charset=UTF-8"
Set hash = jsObject()
hash("error") = 0
hash("url") = fileUrl
' 保存缩略图的路径
hash("urls") = JpegSmall(fileUrl, sPicPathName)
hash.Flush
Response.End

Function showError(message)
    Response.AddHeader "Content-Type", "text/html; charset=UTF-8"
    Dim hash
    Set hash = jsObject()
    hash("error") = 1
    hash("message") = message
    hash.Flush
    Response.End
End Function

' 简单生成缩略图，未做详细判断
Function JpegSmall(OriginalPic, SmallPic)
    Dim Jpeg, PicPath
    Set Jpeg = Server.CreateObject("Persits.Jpeg")
    PicPath = Server.MapPath(OriginalPic)
    Jpeg.Open PicPath
    Jpeg.Width = Jpeg.OriginalWidth / 4
    Jpeg.Height = Jpeg.OriginalHeight / 4
    Jpeg.Quality = 100
    Jpeg.Interpolation = 1
    Jpeg.Save Server.MapPath(SmallPic)
    Jpeg.Close
    Set Jpeg = Nothing
    JpegSmall = SmallPic
End Function
%>

修改的地方加了注释。

实际有：

' 变量：sPicPathName，获取保存后的图片名称，进行缩略图的操作改名
Dim sPicPathName
sPicPathName = saveUrl & Replace(File.filename, ".", "_s.")
' End

' 保存缩略图的路径
hash("urls") = JpegSmall(fileUrl, sPicPathName)

' 简单生成缩略图，未做详细判断
Function JpegSmall(OriginalPic, SmallPic)
    Dim Jpeg, PicPath
    Set Jpeg = Server.CreateObject("Persits.Jpeg")
    PicPath = Server.MapPath(OriginalPic)
    Jpeg.Open PicPath
    Jpeg.Width = Jpeg.OriginalWidth / 4
    Jpeg.Height = Jpeg.OriginalHeight / 4
    Jpeg.Quality = 100
    Jpeg.Interpolation = 1
    Jpeg.Save Server.MapPath(SmallPic)
    Jpeg.Close
    Set Jpeg = Nothing
    JpegSmall = SmallPic
End Function

论坛 Forum