• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    swfupload ajax无刷新上传图片实例代码
    最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个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="/JS/jQuery/jquery-1.9.1.js" type="text/javascript">/script>
    script src="/JS/jQuery/jquery-ui-1.10.2.custom.js" type="text/javascript">/script>
    script type="text/javascript" src="/JS/swf/swfupload.js">/script>
    script type="text/javascript" src="/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的拖拽效果,如果对大家的项目没有什么帮助的话请适当删除。
    您可能感兴趣的文章:
    • jQuery AjaxUpload 上传图片代码
    • php+ajax无刷新上传图片实例代码
    • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
    • java实现上传图片进行切割的方法
    • java异步上传图片示例
    • JSP上传图片产生 java.io.IOException: Stream closed异常解决方法
    • Java使用Ajax实现跨域上传图片功能
    上一篇:MultiLine 换行后实现读取不换行的具体思路
    下一篇:静态gb2312编码在项目传值出现中文乱码现象
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    swfupload ajax无刷新上传图片实例代码 swfupload,ajax,无,刷新,上传,