<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        swfupload ajax無刷新上傳圖片實例代碼

        來源:懂視網 責編:小采 時間:2020-11-27 22:40:57
        文檔

        swfupload ajax無刷新上傳圖片實例代碼

        swfupload ajax無刷新上傳圖片實例代碼:最近自己做項目的時候需要添加一個功能,上傳用戶的圖片,上傳用戶圖片其實涉及到很多東西,不只是一個html標簽<input id=File1 type=file />或者asp.net封住好的FileUpload 控件,現在網站不再講究的是功能性,更多的是用戶體驗性,在這里上傳圖片
        推薦度:
        導讀swfupload ajax無刷新上傳圖片實例代碼:最近自己做項目的時候需要添加一個功能,上傳用戶的圖片,上傳用戶圖片其實涉及到很多東西,不只是一個html標簽<input id=File1 type=file />或者asp.net封住好的FileUpload 控件,現在網站不再講究的是功能性,更多的是用戶體驗性,在這里上傳圖片

        最近自己做項目的時候需要添加一個功能,上傳用戶的圖片,上傳用戶圖片其實涉及到很多東西,不只是一個html標簽<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,現在網站不再講究的是功能性,更多的是用戶體驗性,在這里上傳圖片就需要用到ajax無刷新上傳圖片,這里面包含的東西不是一點半點。這里用到的是一個插件swfupload 實現無刷新上傳圖片。直接上傳我的代碼供大家參考。

        前臺代碼區:
        代碼如下:


        <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChangeAvatar.aspx.cs" Inherits="NovelChannel.ChangeAvatar" %>
        <!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 runat="server">
        <title></title>
        <link href="/CSS/jQueryUI/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
        #draggable
        {
        width:50px;
        height:50px;
        padding:0.5em;
        }
        </style>
        <script src="https://www.gxlcms.com/JS/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="https://www.gxlcms.com/JS/jQuery/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
        <script type="text/javascript" src="https://www.gxlcms.com/JS/swf/swfupload.js"></script>
        <script type="text/javascript" src="https://www.gxlcms.com/JS/swf/handlers.js"></script>
        <script type="text/javascript">
        function uploadImgSuccess(file, response) {
        //$("#imgAvatar").attr("src", response + "?ts=" + new Date());
        //"url("+response + "?ts="+ new Date()+")")
        var strs = $.parseJSON(response);
        var imgPath = strs[0];
        var imgWidth = strs[1];
        var imgHeight = strs[2];
        $("#avatarContainer").css("background-image", "url(" + imgPath + ")");
        $("#avatarContainer").css("width", imgWidth + "px").css("height", imgHeight+"px");
        };
        $(function () {
        var swfu;
        swfu = new SWFUpload({
        // Backend Settings
        upload_url: "/Ajax/UploadAvatar.ashx",
        post_params: {
        "ASPSESSID": "<%=Session.SessionID %>"
        },
        // File Upload Settings
        file_size_limit: "2 MB",
        file_types: "*.jpg",
        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: uploadImgSuccess,
        upload_complete_handler: uploadComplete,
        // Button settings
        button_image_url: "/JS/swf/images/XPButtonNoText_160x22.png",
        button_placeholder_id: "btnUploadImgPlaceholder",
        button_width: 160,
        button_height: 22,
        button_text: '<span class="button">選擇圖片(最大2MB)</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: "/JS/swf/swfupload.swf", // Relative to this file
        flash9_url: "/JS/swf/swfupload_FP9.swf", // Relative to this file
        custom_settings: {
        upload_target: "divFileProgressContainer"
        },
        // Debug Settings
        debug: false
        });
        });
        $(function () {
        $("#draggable").draggable({ containment: "parent" },
        { cursor: "crosshair" });
        $("#draggable").dblclick(function () {
        var thisOffset = $(this).offset();//獲取改容器的坐標位置
        var parentOffset = $(this).parent().offset(); //獲取父容器的坐標位置
        var left = thisOffset.left - parentOffset.left;//得到相對于父窗體的相對位置
        var top = thisOffset.top - parentOffset.top; //得到相對于父窗體的相對位置
        alert(left+" "+top);
        });
        });
        </script>
        </head>
        <body>
        <form id="form1" runat="server">
        <div>
        <span id="btnUploadImgPlaceholder"></span>
        <div id="divFileProgressContainer"></div>
        <br />
        <div id="avatarContainer" style="width:200px;height:300px">
        <div id="draggable" style="background-color:transparent;border-width:1px;border-color:Black;border-style:solid;">
        拖過
        </div>
        </div>
        <img id="imgAvatar" style="display:none;"/>
        </div>
        </form>
        </body>
        </html>

        后臺一般處理程序區:
        (UploadAvatar.ashx)
        代碼如下:

        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.IO;
        using System.Drawing;
        using System.Web.Script.Serialization;
        using System.Drawing.Drawing2D;
        namespace NovelChannel.Ajax
        {
        /// <summary>
        /// UploadAvatar 的摘要說明
        /// </summary>
        public class UploadAvatar : IHttpHandler
        {
        public void ProcessRequest(HttpContext context)
        {
        context.Response.ContentType = "text/plain";
        //context.Response.Write("Hello World");
        HttpPostedFile uploadFile = context.Request.Files["FileData"];
        string ext = Path.GetExtension(uploadFile.FileName);
        if (ext != ".jpg")
        {
        context.Response.Write("非法的文件類型");
        return;
        }
        string fileName = DateTime.Now.ToString("yyMMddhhMMss") + new Random().Next(1000, 9999) +".jpg";
        string filePath = "/Images/UserImg/" + fileName;
        string fullPath = HttpContext.Current.Server.MapPath("~" + filePath);
        uploadFile.SaveAs(fullPath);
        System.Drawing.Image img = Bitmap.FromFile(fullPath);
        string[] strs={filePath,img.Size.Width.ToString(),img.Size.Height.ToString()};
        JavaScriptSerializer jss=new JavaScriptSerializer ();
        string json=jss.Serialize(strs);
        context.Response.Write(json);
        }
        public bool IsReusable
        {
        get
        {
        return false;
        }
        }
        }
        }

        這樣就可以實現無刷新上傳圖片的效果了。由于項目中包含一部分jQuery-UI的拖拽效果,如果對大家的項目沒有什么幫助的話請適當刪除。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        swfupload ajax無刷新上傳圖片實例代碼

        swfupload ajax無刷新上傳圖片實例代碼:最近自己做項目的時候需要添加一個功能,上傳用戶的圖片,上傳用戶圖片其實涉及到很多東西,不只是一個html標簽<input id=File1 type=file />或者asp.net封住好的FileUpload 控件,現在網站不再講究的是功能性,更多的是用戶體驗性,在這里上傳圖片
        推薦度:
        標簽: 代碼 sw upload
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲乱亚洲乱妇无码麻豆| 国产免费小视频在线观看| 国产精品亚洲视频| 亚洲人成色99999在线观看| 日本免费一区二区三区四区五六区 | 精品成在人线AV无码免费看| 爱情岛论坛网亚洲品质自拍| 日韩成人精品日本亚洲| 大学生一级特黄的免费大片视频| 亚洲图片激情小说| 18禁美女裸体免费网站| 亚洲成年轻人电影网站www | 国产精品午夜免费观看网站| 四虎免费久久影院| 特级无码毛片免费视频| 国产一级淫片视频免费看| 麻豆亚洲AV成人无码久久精品 | 免费人成激情视频在线观看冫| 亚洲精品无码久久不卡| 人碰人碰人成人免费视频| 丝袜熟女国偷自产中文字幕亚洲| GOGOGO免费观看国语| 亚洲国产三级在线观看| 亚洲国产精品免费视频| 亚洲精品福利网站| 日韩av无码成人无码免费| 亚洲欧美国产精品专区久久| 永久免费无码网站在线观看| 精品在线免费视频| 亚洲精品成人片在线观看精品字幕| 成人黄网站片免费视频| 亚洲人成电影在在线观看网色| 天天影视色香欲综合免费| 亚洲精华液一二三产区| 国产小视频免费观看| 国产va免费观看| 亚洲综合色一区二区三区小说| 国产免费看JIZZ视频| 亚洲av无码专区在线电影天堂 | 情侣视频精品免费的国产| 污污污视频在线免费观看|