JQuery插件 ajaxfileupload

 

最近在上班时间看了一堆JQuery的插件,突然想把看到喜欢的插件一个个试着写个Demo,于是试着写了个ajaxfileupload的例子

看了一遍官网提供的例子,很快就写了出来,下面是大概的代码:

ajaxfileupload.aspx:

 

 1<script type="text/javascript">
 2        //ajaxfileupload.js
 3            function doajaxFileUpload(){
 4                $("#loading")
 5                .ajaxStart(function(){
 6                    $(this).show();
 7                })
 8                .ajaxComplete(function(){
 9                    $(this).hide();
10                });
11                $.ajaxFileUpload({
12                    url: "ajaxfileupload.aspx",
13                    secureuri: false,
14                    fileElementId: "fileupload",//Input file id
15                    dataType: "json",
16                    success: function(data,status){
17                        if(typeof(data.error) != 'undefined')
18                        {
19                            if(data.error != '')
20                            {
21                                alert(data.error + "sss");
22                            }else
23                            {
24                                alert(data.msg + "aaa");
25                            }
26                        }
27                    },
28                    error: function (data, status, e)
29                    {
30                        alert(e  + "99s");
31                    }
32                });
33    </script>
34

 

 

 

<div>
        请上传一个文件:
        <br />
        <div id="loading">
            <img alt="" style="display:none;" src="resource/images/loading.gif" /></div>
        <input type="file" id="fileupload" name="fileupload" accept="doc" /> 
        <button id="upload" onclick="return doajaxFileUpload();" value="上传"></button>
    </div> 

 

<!--注意,由于用了模板页,所以只帖出用到的代码--->
后台代码:

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ajaxfileupload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
        string msg = string.Empty;
        string error = string.Empty;
        if (files.Count > 0)
        {
            files[0].SaveAs(Server.MapPath("~/images") + System.IO.Path.GetFileName(files[0].FileName));
            msg = " 成功! 文件大小为:" + files[0].ContentLength;
            string res = "{ error:'" + error + "', msg:'" + msg + "'}";
            Response.Write(res);
            Response.End();
        }
    }
}

 

插件地址如下：

http://www.phpletter.com/Our-Projects/AjaxFileUpload/