Recently do the project when you need to add a function, upload the user's picture, upload user pictures actually involves a lot of things, not just an HTML tag <input id= "File1" type= "file"/> or asp.net seal good fileupload control, now the site is no longer fastidious is the function, more is the user experience sex, here uploads the picture to need to use the Ajax not to refresh uploads the picture, here bread contains the thing is not 1:30 point. Here is a plugin swfupload implementation without refreshing upload pictures. Upload my code directly for your reference.
<%@ 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 ">
<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 I website and control
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 ' > select Picture (Max 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 ();//Get the coordinate position of the change container
var Parentoffset = $ (this). Parent (). offset (); Gets the coordinate position of the parent container
var left = thisoffset.left-parentoffset.left;//relative position relative to the parent form
var top = Thisoffset.top-parentoffset.top; Gets the relative position relative to the parent form
Alert (left+ "" +top);
});
});
</script>
<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; " >
Dragged over
</div>
</div>
</div>
</form>
</body>
This allows you to achieve the effect of no refresh upload picture. Because the project contains a part of the Jquery-ui drag effect, if there is no help for everyone's project, please delete the appropriate.
