个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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的拖拽效果，如果对大家的项目没有什么帮助的话请适当删除.

最后此篇关于swfupload ajax无刷新上传图片实例代码的文章就讲到这里了,如果你想了解更多关于swfupload ajax无刷新上传图片实例代码的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： System.Timers.Timer定时执行程序示例代码
文章推荐： 静态gb2312编码在项目传值出现中文乱码现象
文章推荐： MultiLine 换行后实现读取不换行的具体思路
文章推荐： 此页的状态信息无效,可能已损坏 的处理办法及原因分析
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com