swfupload ajax无刷新上传图片实例代码
2024-09-01 08:30:07
供稿：网友
最近自己做项目的时候需要添加一个功能，上传用户的图片，上传用户图片其实涉及到很多东西，不只是一个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",
