/**
* Ajax upload
* Project page - http://valums.com/ajax-upload/
* Copyright (c) 2008 Andris Valums, http://valums.com
* Licensed under the MIT license (http://valums.com/mit-license/)
* Version 3.6 (26.06.2009)
*/
/**
* Changes from the previous version:
* 1. Fixed minor bug where click outside the button
* would open the file browse window
*
* For the full changelog please visit:
* http://valums.com/ajax-upload-changelog/
*/
前台
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link href="sample.css" rel="stylesheet" type="text/css" />
<link href="http://www.cnblogs.com/file-uploader/fileuploader.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/js/ajaxupload.3.6.js" type="text/javascript"></script>
<script type= "text/javascript">/*<![CDATA[*/
$(document).ready(function(){
/*medemo*/
var button2 = $('#Div1'), interval;
new AjaxUpload(button2,{
//action: 'upload-test.php', // I disabled uploads in this example for security reasons
action: 'http://www.cnblogs.com/../MyCondax/UploadFile.aspx',
name: 'myfile',
data : {
'actionIs' : "ckeditor"
},
onSubmit : function(file, ext){
//if (ext && new RegExp('^(' + allowed.join('|') + ')$').test(ext)){
if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
/* Setting data */
this.setData({
'actionIs': 'ckeditor'
});
// change button text, when user selects file
button2.text('正在上传');
// If you want to allow uploading only 1 file at time,
// you can disable upload button
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function(){
var text = button2.text();
if (text.length < 8){
button2.text(text + '.');
} else {
button2.text('正在上传');
}
}, 200);
$('#ldy .text').text('上传 ' + file);
} else {
// extension is not allowed
$('#ldy .text').text('错误：只能上传图片文件');
// cancel upload
return false;
}
},
onComplete: function(file, response){
button2.text('上传图片');
window.clearInterval(interval);
// enable upload button
this.enable();
$('#ldy .text').text(response);
// add file to the list
var r = Math.random()*1000;
CKEDITOR.instances.editor1.insertHtml("<img src='"+ response+"?"+r+"' alt=''/>");
}
});
});/*]]>*/</script>
<style type="text/css">
.wrapper {
width: 133px;
}
div.button {
height: 29px;
width: 133px;
background: url(http://www.cnblogs.com/img/button.png) 0 0;
font-size: 14px;
color: #C7D92C;
text-align: center;
padding-top: 15px;
}
</style>
</head>
<body>
<form action="http://www.cnblogs.com/../SaveNews.aspx?isModify=false" method="post" target="_self" onsubmit="return submitClick();" >
<p>
<input id="Submit1" type="submit" value="提交" style=" 70px; height:24px;"/>
</p>
<hr style="margin:10 10; 100%;" />
标题：<input type="text" id="txtTitle" name="txtTitle" style=" height:23px; 80%;" />
<p>
内容：<textarea id="editor1" rows="80" cols="60" name="editor1"></textarea>
</p>
</form>
<div id="ldy">
<div class="wrapper">
<div id="Div1" class="button">上传图片</div>
</div>
<p>上传的图片:</p>
<p class="text"></p>
<ol class="files"></ol>
</div>
<input id="Hidden1" type="hidden" />
<script type="text/javascript">
//<![CDATA[
// CKEDITOR.replace('editor1',{
// fullPage: true
//});
CKEDITOR.replace('editor1',{extraPlugins:'autogrow',autoGrow_maxHeight:400});
function submitClick() {
var title = document.getElementById("txtTitle").value;
var content = CKEDITOR.instances.editor1.getData();
if (title=="") {
alert("标题内容不能为空!请核查后提交。");
return false;
}
return true;
}
//]]>
</script>
</body>
</html>
服务器端接收图片的方法
public System.Web.HttpPostedFile CurrentHttpPostedFile
{
get
{
HttpFileCollection files = Request.Files;
if (files.Count == 0)
{
return null;
}
else
{
return files[0];
}
}
}
图片处理完成后在页面输出数据作为JS的返回值
Response.ContentType = "text/plain";
Response.Clear();
Response.Write(returnText);
Response.End();