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

 更新时间:2021年9月22日 10:14  点击:2140
最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个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的拖拽效果,如果对大家的项目没有什么帮助的话请适当删除。
[!--infotagslink--]

相关文章

  • php无刷新利用iframe实现页面无刷新上传文件(1/2)

    利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数,该参数为从客户端获取的$_files变量,返回重新命名后的文件名,如果上传失...2016-11-25
  • jQuery+PHP发布的内容进行无刷新分页(Fckeditor)

    这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23
  • php上传图片学习笔记与心得

    我们在php中上传文件就必须使用#_FILE变量了,这个自动全局变量 $_FILES 从 PHP 4.1.0 版本开始被支持。在这之前,从 4.0.0 版本开始,PHP 支持 $HTTP_POST_FILES 数组。这...2016-11-25
  • php+ajax制作无刷新留言板

    本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图:数据库连接代码如下: <&#63;php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30
  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
  • ajax+php 无刷新数据调用经典实例

    <!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/1...2016-11-25
  • php+jquery Ajax异步上传图片(ajaxSubmit)实例

    下面我们一起来看一个php+jquery Ajax异步上传图片(ajaxSubmit)实例,这个我们真正的利用了ajax而不是使用iframe之类的哦。 效果如下 ...2016-11-25
  • php iframe 无刷新文件上传代码

    其它原理很简单,利用form表单的target属性和iframe来实现的,打开为iframe试就行了,返回就利用js判断php教程运行后返回的参数是不是成功 一、上传文件的一个php方法。...2016-11-25
  • iframe无刷新文件上传实现程序

    iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面,有点像ajax局部刷新一个,只是我们把它放到了iframe页面中上传,同时我们把iframe页面给隐藏了。 一个...2016-11-25
  • php ajax实现无刷新检测用户名是否可用

    本文章简单的介绍了二种关于php ajax实现无刷新检测用户名是否可用,有我是利用了jquery的$.ajax来实例,有需要的朋友可以参考一下本实例。 前 言...2016-11-25
  • php+ajax实现无刷新的新闻留言系统

    本文介绍了一款无刷新的新闻留言系统,最简明易懂的一个ajax无刷新留言系统,源码中省略了接受数据验证的过程,大家可根据自己的需求进行扩展,下面进入主题。核心源码:1.配置文件:config.php,代码如下:<&#63;php //数据库配...2015-10-30
  • PHP:实现给上传图片加水印的程序代码

    用PHP给上传图片加水印的程序是通过判定文件类型建立图形,然后把其复制到原建立的图形上,填充并建立rectangle,以备写入imagestring()或是原已经定好的图像程序当中判定水...2016-11-25
  • vue实现上传图片添加水印

    这篇文章主要为大家详细介绍了vue实现上传图片添加水印,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-13
  • PHP上传图片时判断上传文件是否为可用图片的方法

    这篇文章主要介绍了PHP上传图片时判断上传文件是否为可用图片的方法,涉及php针对图片的后缀检测操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-11-01
  • ajax+php无刷新回贴和注册检验实例

    本文章来给大家介绍一个原生态的ajax+php无刷新回贴和注册检验实例,如果你对此有兴趣不防进入参考哦。 先看xin.sql数据库,我们可直接复制保存成xxx.sql哦。 ...2016-11-25
  • jQuery无刷新切换主题皮肤实例讲解

    主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。实现该功能的原理就是通过点击定义的主题样式,改变...2015-10-23
  • 【帝国CMS插件】帝国CMS7.0图集批量上传插件 批量上传图片

    帝国CMS的图集上传一直是很蛋疼的事情。 猪先飞网以前发布过一款 图集批量上传插件 ,但可惜只支持6.6版。不支持7.0版。 而帝国CMS7.0版自2013年03月份发布以来,一直没有人放...2015-12-30
  • php检测上传图片的长度和宽度

    /* array getimagesize ( string $filename [, array &$imageinfo ] ) getimagesize()函数将确定任何给定的图像大小的文件,并返回随着文件类型和高度/宽度的文本字符串...2016-11-25
  • C#实现上传照片到物理路径,并且将地址保存到数据库的小例子

    这篇文章主要介绍了c#上传图片,并将地址保存到数据库中的简单实例,有需要的朋友可以参考一下...2021-09-22
  • 帝国7.0 多值字段修改为 可以上传图片的形式

    我们知道多值字段功能很强大,但不能上传图片确很操蛋,其实改吧改吧就可以了,只是帝国的大大们似乎不太注意这些小细节,只有靠自己来优化了。<script> function domvadd_ffff() {...2015-12-30