JQuery Form 上传
最近网站的TINYMCE要拓展下功能，主要就是在WEBFORM中 弹出一个DIV并上传，然后将上传后的图片插到当前编辑器的焦点所在，
这个图片还只是存到临时的文件夹中，后面提交的时候替换下URL，然后存到指定的文件夹。
其实之前这类型的上传有做过，就是没做过上传完后的CALLBACK，本想自己写写，但是时间不够，只能用回JQUERY.FORM
页面代码如下：
把弹出的DIV的JS也写出来了，一起MARK下，以后方便找回哈。
View Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
background:url(/Content/img/notice.png) no-repeat 0 0 transparent;
width:326px;
height:229px;
padding:50px 0 20px 25px;
}
</style>
<script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.form.js"></script>
<script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//select all the a tag with name equal to modal
$('#modal1').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
if(location.port == "80")
{
$('#UploadDocument').attr("action", "http://" + location.hostname + "/WebService1.asmx/UploadFileCollection");
}
else
{
$('#UploadDocument').attr("action", "http://" + location.hostname + ":" + location.port + "/WebService1.asmx/UploadFileCollection");
}
$('#UploadDocument').ajaxForm({
beforeSubmit: clearOutput,
success: writeOutput
});
});
$(document).ajaxError(function(ev, opts, xhr, msg, ex) {
alert(msg + ': ' + ex);
});
// pre-submit callback
function clearOutput(a, f, o) {
o.dataType = 'xml';
}
// success callback
function writeOutput(data) {
var el = data.documentElement.childNodes.item(0).nodeValue;
var ellist = el.split("|");
if(ellist.length>0)
{
//alert(ellist[0]);
$('#divshow').append('<img src="' + ellist[0] + '" alt="" ></img>');
//alert(ellist[1]);
//alert($('#lblimgconvert').html());
$('#lblimgconvert').text( $('#lblimgconvert').html() + '<' + el);
}
$('#mask').hide();
$('.window').hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#dialog" name="modal" id="modal1">Sticky Note</a>
<div id="divshow"></div>
<div><label id="lblimgconvert">convert</label></div>
</div>
</form>
<div id="boxes">
<!-- Start of Sticky Note -->
<div id="dialog" class="window">
<form id="UploadDocument" action="" method="POST" enctype="multipart/form-data">
<input type="file" id="docbinaryarray" name="docbinaryarray" />
<input type="submit" id="UploadMe" name="UploadMe" title="Upload File" value="Upload File" />
</form>
</div>
<!-- End of Sticky Note -->
<!-- Mask to cover the whole screen -->
<div id="mask">
</div>
</body>
</html>
WEBSERVICE代码：
View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Drawing;
using System.IO;
using Core;
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
//[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string UploadFileCollection()
{
string result = string.Empty;
try
{
string curdirectory = "~/Upload/{0}/".FormatWith("{0:yyyyMMdd}".FormatWith(DateTime.Now));
DirectoryInfo curdi = new DirectoryInfo(Server.MapPath(curdirectory));
if (!curdi.Exists)
{
curdi.Create();
}
HttpContext postedContext = HttpContext.Current;
HttpFileCollection Files = postedContext.Request.Files;
if (Files.Count == 1 && Files[0].ContentLength > 1)
{
byte[] binaryWriteArray = new byte[Files[0].InputStream.Length];
Files[0].InputStream.Read(binaryWriteArray, 0, (int)Files[0].InputStream.Length);
string filenametemp = "{0}.{1}".FormatWith(Guid.NewGuid().Shrink(), Files[0].FileName.Split('.')[Files[0].FileName.Split('.').Length - 1]);
string pathtemp = "~/Temp/{0}".FormatWith(filenametemp);
string pathreally = curdirectory + filenametemp;
FileStream objfilestream = new FileStream(Server.MapPath(pathtemp), FileMode.Create, FileAccess.ReadWrite);
objfilestream.Write(binaryWriteArray, 0, binaryWriteArray.Length);
objfilestream.Close();
result += "{0}|{1}".FormatWith(pathtemp.Substring(2, pathtemp.Length - 2), pathreally.Substring(2, pathreally.Length - 2));
}
//result += "\"";
return result;
}
catch (Exception ex1)
{
throw new Exception("Problem uploading file: " + ex1.Message);
}
return "false";
}
}
