当前位置: 首页 > 网页设计 > 网页制作技巧 > 正文

使用swfupload实现网站图片上传,水印,预览和截图

时间:2014-07-02

周末闲着没事,将网站中经常用到的对图片的操作做了一个总结,方便以后回顾,这里将一天的成果,贴出来,希望能帮到大家。

首先是swfupload方式的无刷新上传,关于怎么配置,按照demo 的写法,我相信只要你不是太笨,都能成功。

关于swfupload你可以去网上下,也可以点这里下载:SWFUpload_v250_beta_3_samples.rar

项目结构:

上传代码:

前台上传页面,你可以根据需要建html页,也可以建webform。这里用一般处理程序来对照片进行处理,加水印,修改文件名等操作。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SWFUploadImage.aspx.cs" Inherits="Wolfy.ImageWeb.SWFUploadImage" %>
    
<!DOCTYPE html>
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"  />
    <script src="../SWFUpload/swfupload.js" type="text/javascript"></script>
    <script src="../SWFUpload/handlers.js" type="text/javascript"></script>
    <script src="../Script/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "/SWFUploadHandler.ashx",//交给一般处理程序来处理
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },
    
                // File Upload Settings
                file_size_limit: "2 MB",
                file_types: "*.jpg;*.gif",
                file_types_description: "JPG Images",
                file_upload_limit: 0,    // Zero means unlimited
    
                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                swfupload_preload_handler: preLoad,
                swfupload_load_failed_handler: loadFailed,
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                upload_success_handler: Show,//这里修改了方法的定义。
                upload_complete_handler: uploadComplete,
    
                // Button settings
                button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span class="button">选择上传图片 <span class="buttonSmall">(2 MB Max)</span></span>',
                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 1,
                button_text_left_padding: 5,
    
                // Flash Settings
                flash_url: "/SWFUpload/swfupload.swf", // Relative to this file
                flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file
    
                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },
    
                // Debug Settings
                debug: false
            });
        }
        //上传成功以后执行该方法
        function Show(file, serverData) {
            var s = serverData.split(':');//接收从服务端返回的数据,按照分号分隔
    
            if (s[0] == "ok") {
                $("#imgSrc").attr("src", s[1]);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
            
        <div id="content">
    
            <div id="swfu_container" style="margin: 0px 10px;">
                <div>
    
                    <span id="spanButtonPlaceholder"></span>
    
                </div>
    
                <div id="divFileProgressContainer" style="height: 75px;"></div>
    
                <img id="imgSrc"  />
            </div>
        </div>
    </form>
</body>
</html>