flash 无刷新上传文件图片缩略图前台

最新推荐文章于 2020-02-12 15:25:50 发布

homeauto

最新推荐文章于 2020-02-12 15:25:50 发布

阅读量560

点赞数

分类专栏： .net

本文链接：https://blog.csdn.net/u011847928/article/details/10792157

版权

.net 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CutPhoto.aspx.cs" Inherits="BookShop.Web.Test.CutPhoto" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="../Css/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="../Css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
    <script src="../SWFUpload/handlers.js" type="text/javascript"></script>
    <script src="../SWFUpload/swfupload.js" type="text/javascript"></script>
    <script src="../js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
    <script src="../js/jquery.imgareaselect.js" type="text/javascript"></script>
    <script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "/ashx/upload.ashx?action=up",
                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: showMessage,
                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>',
                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 () {
            $("#btnCut").click(function () {
                //alert(123464);
                cutPhoto();
            });
        });
        //定义一个点击图片获取图片的位置与大小的方法
        function cutPhoto() {
            //            //获取剪切的图片x位置
            //            var x = $("#divCut").offset().left - $("#divContent").offset().left;
            //            var y = $("#divCut").offset().top - $("#divContent").offset().top;
            //            var width = $("#divCut").width();
            //            var height = $("#divCut").height();
            //            //alert(height);
            /*
             x:$('#selectbanner').data('x'),

   y:$('#selectbanner').data('y'),

   w:$('#selectbanner').data('w'),

   h:$('#selectbanner').data('h'),

            */
            //            //发送异步请求
            $.post("/ashx/upload.ashx", { "x": $('#divContent').data('x'), "y": $('#divContent').data('y'), "width": $('#divContent').data('w'), "height": $('#divContent').data('h'), "action": "cut", "imgUrl": data[1] }, function (data) {
                $("#showImg").attr("src", data);
                //alert(data);
            });

        }
        function preview(img, selection) {

            $('#divContent').data('x', selection.x1);

            $('#divContent').data('y', selection.y1);

            $('#divContent').data('w', selection.width);

            $('#divContent').data('h', selection.height);

        } 
        var data;
        function showMessage(file, serverData) {
            data = serverData.split(":");
            if (data[0] == "ok") {
                //$("#showImg").attr("src", data[1]);
                $("#divContent").css("backgroundImage", "url(" + data[1] + ")");
                $("#divContent").css("width", data[2] + "px");
                $("#divContent").css("height", data[3] + "px");
                $("#divCut").show();
                //                $("#divCut").draggable({ containment: "parent" }).resizable({
                //                    containment: "parent"
                //                });
                $('#divContent').imgAreaSelect({ selectionColor: 'blue', x1: 0, y1: 0, x2: 150,

                    y2: 100,

                    selectionOpacity: 0.2, onSelectEnd: preview
                });
            }
        }
    </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>
            <div id="thumbnails">
            </div>
        </div>
        <div id="divContent">
            <div id="divCut" style="width: 100px; height: 100px; border: 1px solid red; display: none;">
            </div>
        </div>
        <input type="button" value="剪切图片" id="btnCut" /><img id="showImg" />
    </div>
    </form>
</body>
</html>

homeauto

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flash 无刷新上传文件图片缩略图前台

var swfu; window.onload = function () { swfu = new SWFUpload({ // Backend Settings upload_url: "/ashx/upload.ashx?action=up", p
复制链接

扫一扫