扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章
创新互联公司是一家专注于成都网站制作、网站建设、外贸网站建设与策划设计,临夏网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:临夏等地区。临夏做网站价格咨询:13518219792
《ASP.NET 使用js插件出现上传较大文件失败的解决方法（ajaxfileupload.js第一弹》
《jQuery 关于ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二弹）》
的一个收关。但是最初也是因为想做这么一个功能，一点一点的引发出了好多问题，不断去学习，研究，才写了这三篇。
早些时候已经实现了上传头像的功能，但是代码却是零零散散的，有html，有jQuery还有c#，所以就决定把这个功能独立出来，当个插件用会方便很多。而事实是在封装成插件的过程中，也学到了很多知识。
下面给大家看一下界面：
1、初始情况下
2、点击上传头像，弹出选择，预览浮动框
3、选择图片
4、确定后，符合要求，会提示成功，不符合要求，也会做出相应的提示
5、预览
6、确定上传
下面是部分代码
js部分：
$.fn.extend({
ShowTheFloatDiv: function (obj) {
$(this).click(function () {
$("body").find("*").not("div.float-outer").attr("disabled", "disabled");
var $float = jQuery.CreateTheFloatDiv();
$img_outer_obj = obj;
});
}
});
$.extend({
CreateTheFloatDiv: function () {
if ($(".float-outer").size() == 1) {
return $(".float-outer");
}
var left_offset = ($(window).width() - 600) / 2;//显示在浏览器窗口比较正的位置，看着比较舒服
var top_offset = ($(window).height() - 278) / 3;
var theFloatDivHtml = "";
theFloatDivHtml += "上传头像 C#部分：
因为上传文件用到了ajax，需要先将图片上传到本地，这里也算是一个比较纠结的事情吧，因为如果想预览，除非用一些插件，否则使用的方法都得是先上传，再预览这样。这种来者都要不拒的事，看起来比较流氓哈~~
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (files.Count > 0)
{
if (System.IO.File.Exists(Server.MapPath("/UploadImages/") + files[0].FileName))
{
msg = "图片已存在";
error = "1001";
string res1 = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res1);
Response.End();return;
}
if (files[0].ContentLength > 4 * 1024 * 1024)
{
msg = "图片大小不能超过4M";
error = "1002";
string res1 = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res1);
Response.End();return;
}
try
{
files[0].SaveAs(Server.MapPath("/UploadImages/") + System.IO.Path.GetFileName(files[0].FileName));
}
catch (System.IO.DirectoryNotFoundException)
{
}
msg = " 上传成功! 图片大小为:" + files[0].ContentLength + "K";
imgurl = "/UploadImages/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}如何调用此插件