欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

swfupload ajax無(wú)刷新上傳圖片實(shí)例代碼

 更新時(shí)間:2013年06月16日 15:04:55   作者:  
在這里上傳圖片就需要用到ajax無(wú)刷新上傳圖片,這里面包含的東西不是一點(diǎn)半點(diǎn)。這里用到的是一個(gè)插件swfupload實(shí)現(xiàn)無(wú)刷新上傳圖片,感興趣的朋友可以參考下哈
最近自己做項(xiàng)目的時(shí)候需要添加一個(gè)功能,上傳用戶(hù)的圖片,上傳用戶(hù)圖片其實(shí)涉及到很多東西,不只是一個(gè)html標(biāo)簽<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,現(xiàn)在網(wǎng)站不再講究的是功能性,更多的是用戶(hù)體驗(yàn)性,在這里上傳圖片就需要用到ajax無(wú)刷新上傳圖片,這里面包含的東西不是一點(diǎn)半點(diǎn)。這里用到的是一個(gè)插件swfupload 實(shí)現(xiàn)無(wú)刷新上傳圖片。直接上傳我的代碼供大家參考。

前臺(tái)代碼區(qū):
復(fù)制代碼 代碼如下:

<%@ 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();//獲取改容器的坐標(biāo)位置
var parentOffset = $(this).parent().offset(); //獲取父容器的坐標(biāo)位置
var left = thisOffset.left - parentOffset.left;//得到相對(duì)于父窗體的相對(duì)位置
var top = thisOffset.top - parentOffset.top; //得到相對(duì)于父窗體的相對(duì)位置
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;">
拖過(guò)
</div>
</div>
<img id="imgAvatar" style="display:none;"/>
</div>
</form>
</body>
</html>

后臺(tái)一般處理程序區(qū):
(UploadAvatar.ashx)
復(fù)制代碼 代碼如下:

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 的摘要說(shuō)明
/// </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("非法的文件類(lèi)型");
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;
}
}
}
}

這樣就可以實(shí)現(xiàn)無(wú)刷新上傳圖片的效果了。由于項(xiàng)目中包含一部分jQuery-UI的拖拽效果,如果對(duì)大家的項(xiàng)目沒(méi)有什么幫助的話(huà)請(qǐng)適當(dāng)刪除。

相關(guān)文章

  • AspNetPager與Socut.Data使用方法

    AspNetPager與Socut.Data使用方法

    最近對(duì)AspNetPager與Socut.Data這兩個(gè)控件產(chǎn)生了濃厚的興趣,這兩個(gè)控件配合可以減輕很多程序員編寫(xiě)代碼的壓力。ASpNetPager為分頁(yè)控件,而Socut.Data為數(shù)據(jù)操作控件,ACCESS,MSSQL都可以。
    2008-10-10
  • asp.net窗體操作總結(jié)

    asp.net窗體操作總結(jié)

    這些代碼全部寫(xiě)在和頁(yè)面分離的代碼頁(yè)中(codebehind),如果要嵌入到*.aspx頁(yè)面,可能會(huì)出現(xiàn)問(wèn)題.
    2008-11-11
  • .Net Core中使用Grpc的方法

    .Net Core中使用Grpc的方法

    這篇文章主要介紹了.Net Core中使用Grpc的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-10-10
  • asp.net core3.1cookie和jwt混合認(rèn)證授權(quán)實(shí)現(xiàn)多種身份驗(yàn)證方案

    asp.net core3.1cookie和jwt混合認(rèn)證授權(quán)實(shí)現(xiàn)多種身份驗(yàn)證方案

    身份驗(yàn)證是確定用戶(hù)身份的過(guò)程。 授權(quán)是確定用戶(hù)是否有權(quán)訪(fǎng)問(wèn)資源的過(guò)程。本文主要介紹了asp.net core3.1cookie和jwt混合認(rèn)證授權(quán)實(shí)現(xiàn)多種身份驗(yàn)證方案,感興趣的可以了解一下
    2021-09-09
  • datatable行轉(zhuǎn)列示例分享

    datatable行轉(zhuǎn)列示例分享

    這篇文章主要介紹了datatable行轉(zhuǎn)列示例,指定需要轉(zhuǎn)換的表和轉(zhuǎn)換表表頭對(duì)應(yīng)舊表字段就可以轉(zhuǎn)換了
    2014-01-01
  • ASP.NET MVC 文件上傳教程(一)

    ASP.NET MVC 文件上傳教程(一)

    這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC 文件上傳教程第一篇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • Visual Studio for Mac版 初體驗(yàn)

    Visual Studio for Mac版 初體驗(yàn)

    這篇文章主要介紹了Visual Studio for Mac版 初體驗(yàn),本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2017-05-05
  • WPF使用Canvas畫(huà)布面板布局

    WPF使用Canvas畫(huà)布面板布局

    這篇文章介紹了WPF使用Canvas畫(huà)布面板布局的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-02-02
  • 從別人那拷下來(lái)的幾點(diǎn)Session使用的經(jīng)驗(yàn)

    從別人那拷下來(lái)的幾點(diǎn)Session使用的經(jīng)驗(yàn)

    從別人那拷下來(lái)的幾點(diǎn)Session使用的經(jīng)驗(yàn)...
    2007-04-04
  • .net 通過(guò)URL推送POST數(shù)據(jù)具體實(shí)現(xiàn)

    .net 通過(guò)URL推送POST數(shù)據(jù)具體實(shí)現(xiàn)

    這篇文章主要介紹了.net 通過(guò)URL推送POST數(shù)據(jù)具體實(shí)現(xiàn),有需要的朋友可以參考一下
    2013-12-12

最新評(píng)論