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",
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();
        }
    }
}

 

小弟刚出道,只为学习之用,适用菜鸟的参考,有什么不对的地方,请指出...呵呵

绿色通道： 好文要顶 关注我 收藏该文 与我联系

(心)Shing Ye
关注 - 2
粉丝 - 2

+加关注

0

0

(请您对文章做出评价)

«博主前一篇： 推荐阿里妈妈广告,便可稳赚50大元!!
»博主后一篇： 解决tinyMCE编辑器一些快捷键被屏蔽的方法

Posted on 2007-12-11 22:36 (心)Shing Ye 阅读(5279) 评论(7) 编辑 收藏

Feedback

#1楼　回复　引用　  

2007-12-12 09:36 by XXOXX[未注册用户]

对于使用JS来做异步的文件传输 按以上方法的话 其实不要那么复杂 做一个POST方法 把文件POST到文件处理页面也是可以的

#2楼[楼主]　回复　引用　查看　  

2007-12-12 10:39 by (心)Shing Ye       

@XXOXX
这个当然,但是我的目的只是学习jquery的插件,真正项目用到话,看哪个最容易实现,就用哪个了,你说是吗?

#3楼　回复　引用　查看　  

2007-12-12 11:28 by 菜菜灰       

复制代码会有问题，能否打包发给我学习学习，caicaihui@126.com

#4楼　回复　引用　  

2007-12-12 14:37 by holygrace[未注册用户]

学习？我很想说楼主您的学习方式不对，仅仅是学这个插件的使用吗？有什么用呢？jquery更新后，这个插件不能使用怎么办？拿起它的代码，看看它的实现原理在自己写个出来，这才是学习！

#5楼[楼主]　回复　引用　查看　  

2007-12-12 23:22 by (心)Shing Ye       

@holygrace
无刷新上传本来就有很多实现的方法,不一定要这个,目的只为了了解这个插件的原理,很了解这个插件的源代码而已,当自己弄懂了...可以自己写个,当然是好了...

#6楼　回复　引用　查看　  

2008-08-08 16:50 by 书生多命贱       

支持2个file吗？

#7楼　回复　引用　  

2009-04-11 19:20 by liqian[未注册用户]

我怎么运行不了呢？楼主发给我一份完整的代码吧，我学习一下。谢谢！
nkliqian@gmail.com