JS Ajax上传控件

/**
 * 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();