flash头像上传组件_jsp源码

发布时间：2023-05-14 05:04:19

Flash头像上传组件是一款基于Adobe Flash技术的图片上传组件，能够实现用户在浏览器中上传头像图片，并且可以对图片进行剪裁和编辑，最终将处理后的图片保存在服务器端。

本文将介绍如何通过jsp源码来实现Flash头像上传组件的使用。

一、下载插件

首先需要下载Flash头像上传组件插件，可以在网上搜索“Flash头像上传组件下载”，找到一个比较稳定、适合自己的版本进行下载。

二、引入插件

将下载好的插件文件解压，将解压出来的文件夹拷贝到Web应用程序的根目录下。

在JSP页面头部引入以下JavaScript代码：

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {
        uid: "用户编号",
        upload_url: "上传接口地址",
        return_url: "上传成功后跳转页面地址",
        scale: "是否允许缩放",
        resize: "是否允许剪裁",
        width: "组件宽度",
        height: "组件高度";
    };
    var params = {
        allowScriptAccess: "sameDomain",
        wmode: "opaque"
    };
    var attributes = {};
    swfobject.embedSWF("upload.swf", "upload", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

其中，需要将uid替换成用户的编号，upload_url替换成上传头像的接口地址，return_url替换成上传成功后跳转的页面地址，scale和resize分别表示是否允许缩放和剪裁，width和height分别表示组件的宽度和高度。

三、编写上传接口

接下来需要编写上传头像的接口。在Web应用程序的服务器端编写Java代码，监听客户端的上传请求，将上传的图片保存到指定的路径，最后返回保存后的图片路径。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取上传文件
    Part part = request.getPart("file");
    // 保存文件
    String basePath = request.getSession().getServletContext().getRealPath("/") + "upload/";
    String fileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + ".jpg";
    String filePath = basePath + fileName;
    InputStream is = part.getInputStream();
    OutputStream os = new FileOutputStream(filePath);
    byte[] buffer = new byte[1024];
    int len = 0;
    while((len = is.read(buffer)) != -1) {
        os.write(buffer, 0, len);
    }
    os.close();
    is.close();
    // 返回文件路径
    response.setContentType("text/plain;charset=UTF-8"); 
    PrintWriter out = response.getWriter();
    out.print(fileName);
    out.flush();
    out.close();
}

在上述代码中，首先获取上传的文件，然后将文件写入指定的路径下，最后返回保存后的文件路径。

四、编辑页面

最后需要编写显示上传组件的JSP页面代码，可以参考以下示例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>Flash头像上传组件示例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
        var flashvars = {
            uid: "10001",
            upload_url: "upload.do",
            return_url: "index.jsp",
            scale: "1",
            resize: "1",
            width: "500",
            height: "500"
        };
        var params = {
            allowScriptAccess: "sameDomain",
            wmode: "opaque"
        };
        var attributes = {};
        swfobject.embedSWF("upload.swf", "upload", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
    </script>
</head>
<body>
    <div id="upload"></div>
</body>
</html>

在上述代码中，需要将flashvars中的参数值替换成自己需要的数值。

通过以上步骤，就可以完成Flash头像上传组件的使用了。用户可以在浏览器中点击上传组件进行上传头像，上传成功后会跳转到指定的页面。在上传头像的过程中，用户还可以对图片进行剪裁和编辑，非常方便实用。