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 " ;
}
}

转载于:https://www.cnblogs.com/lavandachen/articles/1990381.html