轻量级伪ajax 文件上传。

js文件：

 

 

 

document.writeln("<div id='answerupfilediv' style='text-align:right'></div>");
        var upLoadDemo =

" <input type='hidden' value='' id='upFileName' name='upFileName' /> <form id='formFile' name='formFile' method=\"post\" action='http://www.cnblogs.com/upload.aspx' target='frameFile' enctype=\"multipart/form-data\"><input type='file' id='fileUp' onchange='UpLoadFileChange();' name='fileUp' /></form><iframe id='frameFile' name='frameFile' style=' display:none;'></iframe><div style='display:none' id='uploadLog'></div><div id='UpLoadFileLinkDiv' style='display:none' ><a id='uploadfilehrefa' href = '../UpFile/' target='_blank'></a>&nbsp;&nbsp;&nbsp;&nbsp;<a style='cursor: pointer;display:none;color:#018DCA' id='updateUpLoadFileLink' onclick='updateUpLoadFile();'>update</a></div>"

        $("#answerupfilediv").append(upLoadDemo);

 

        //$(function() {
        //    $('#fileUp').change(function() {
        //        $('#uploadLog').html('Loading....');
        //        $('#formFile').submit();
        //    });
        //})

 

 //2011-07-23 修正，如果有登陆限制，链带onclick，则不能够使用事件委托

 

　　

　　

function UpLoadFileChange() {
    $('#UpLoadFileLinkDiv').css('display', 'none');
    $('#uploadLog').html('Loading....');
    $('#uploadLog').css('display', '');
    $('#formFile').submit();
}

 

 

 

function uploadSuccess(msg) {
    if (msg.split('|').length > 1) {
        $('#upFileName').val(msg.split('|')[1]);
        $('#uploadLog').html('');
        $('#uploadLog').css('display', 'none');
        $('#formFile').css('display', 'none');
        $('#answerUpLoadFileButton').attr('disabled', true);
        $('#uploadfilehrefa').html((msg.split('|')[1]).split('/')[1]);
        $('#uploadfilehrefa').attr('href', upfileBasePath + msg.split('|')[1]);
        $('#updateUpLoadFileLink').css('display', '');
        $('#UpLoadFileLinkDiv').css('display', '');
    } else {
        $('#uploadLog').html(msg);

    }
}

 

 

 //2011-07-25修正 增加修改上传附件

 

 

function updateUpLoadFile() {
    $('#formFile').css('display', '');
    $('#answerUpLoadFileButton').removeAttr('disabled');
}

 

 

 

//2011-07-25修正 增加登录限制

$("#fileUp").bind("click", function() {
    if (isValUserLogin == 0 && !ValUserLgoin($("#answerupfilediv"))) {
        showfadeDiv($("#lgdiv"), $("#answerupfilediv"));
        return false;
    }
})

 

 

 

 

 //2011-07-22 修正，兼容火狐，ie。之前的版本只能在火狐中使用，

 

 XXX.aspx：

 

 <div>

 <!-- 需要显示上传的地方 -->

 

<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> 

 

 

<script src="../js/UpLoadFile.js" type="text/javascript"></script> 

 

</div>

 

 

 

 

 

upload.aspx.cs ：（必须滴）

 

 

 

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            //获取当前Post过来的file集合对象,在这里我只获取了<input type='file' name='fileUp'/>的文件控件
            HttpPostedFile file = Request.Files["fileUp"];
            if (file != null)
            {
                //当前文件上传的目录
                string path = Server.MapPath("~/");
                //当前待上传的服务端路径
                string imageUrl = path + Path.GetFileName(file.FileName);
                //当前文件后缀名
                string ext = Path.GetExtension(file.FileName).ToLower();
                //验证文件类型是否正确
                if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
                {
                    //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                    Response.Write("<script>window.parent.uploadSuccess('你上传的文件格式不正确！上传格式有(.gif、.jpg、.png、.bmp)');</script>");
                }
                //验证文件的大小
                if (file.ContentLength > 1048576)
                {
                    //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                    Response.Write("<script>window.parent.uploadSuccess('你上传的文件不能大于1048576KB!请重新上传！');</script>");
                }
                //开始上传
                file.SaveAs(imageUrl);

                //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                //如果成功返回的数据是需要返回两个字符串，我在这里使用了|分隔  例： 成功信息|/Test/hello.jpg
                Response.Write("<script>window.parent.uploadSuccess('Upload Success!|/Test/" + file.FileName + "');</script>");
            }
            else
            {
                //上传失败
                Response.Write("upload lose!");
            }
        }
        catch
        {
            //上传失败
            Response.Write("upload lose!");
        }
    }

 

 

 

 

 

 据说看了不回帖的人，经常玩 DeBug