先简单的侃两句:貌似已经有八个月的岁月未曾写过小说了,不过仍会像以前那么每日至少有一至四个钟头是泡在园子里看各位大神的篇章。明天在钻探“ajax无刷新上传”方面包车型客车有些插件,用SWFUpload完成了无刷新上传的功能,不过个人觉得不是很周详。

     明日在网上找到了贰个称作uploadify的jquery上传插件,看到园子里有几篇文章也是介绍这些插件的,心想何不用那个试试。

     可是园子里的这几篇小说用到的uploadify照旧在此以前的旧版本uploadify-v二.1.0,小编在官网上下载的是uploadify-v三.一版,个中的部分参数以及调用方法也不如了,万幸官网有协理文书档案。

(唯一感觉痛苦的有些正是这几个开发包是对准php的,官网并不曾.NET版本,但最少原理都以一致的,不难的改动一下就足以了。照旧那句话“不仅要知其然,还要知其所以然”,知其所以然了,壹切都是浮云啊)

好了,废话不多说。先上个效益图,有图有真相:

jQuery 1

壹:从官网下载开发包添加到项目中,笔者对这一个开发包做了一个精简,删去了那三个php方面的文件:

jQuery 2

种类为主构造:

jQuery 3

二:添加对css和js文件的引用:

jQuery 4

小心jquery.js文件和uploadify.js文件的调用顺序。

三:Default.aspx页面包车型地铁代码如下:

 

<head runat="server">
    <title></title>
    <link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
        $(function () {
            $("#uploadify").uploadify({
                //指定swf文件
                'swf': 'js/uploadify/uploadify.swf',
                //后台处理的页面
                'uploader': 'UploadHandler.ashx',
                //按钮显示的文字
                'buttonText': '上传图片',
                //显示的高度和宽度,默认 height 30;width 120
                //'height': 15,
                //'width': 80,
                //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'fileTypeDesc': 'Image Files',
                //允许上传的文件后缀
                'fileTypeExts': '*.gif; *.jpg; *.png',
                //发送给后台的其他参数通过formData指定
                //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
                //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
                //'queueID': 'fileQueue',
                //选择文件后自动上传
                'auto': true,
                //设置为true将允许多文件上传
                'multi': true
            });
        });

    </script>
</head>
<body>
    <div>
        <%--用来作为文件队列区域--%>
        <div id="fileQueue">
        </div>
        <input type="file" name="uploadify" id="uploadify" />
        <p>
            <a href="javascript:$('#uploadify').uploadify('upload')">上传</a>| 
            <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>
        </p>
    </div>
</body>
</html>

 

4:壹般处理程序UploadHandler.ashx简单代码如下:

 

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //http://www.cnblogs.com/babycool/
            //接收上传后的文件
            HttpPostedFile file = context.Request.Files["Filedata"];
            //其他参数
            //string somekey = context.Request["someKey"];
            //string other = context.Request["someOtherKey"];
            //获取文件的保存路径
            string uploadPath =
                HttpContext.Current.Server.MapPath("UploadImages" + "\\");
            //判断上传的文件是否为空
            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                //保存文件
                file.SaveAs(uploadPath + file.FileName);
               context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0");
            }  

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

 

按 Ctrl+C 复制代码

5:用到的参数介绍:

透过查看jquery.uploadify-3.一.js中的暗中同意设置并参考官方文档可查出:

jQuery 5

 

参数不另行内定则保持默许:

swf:uploadify.swf 文件的相对路径

uploader:后台处理程序的相对路径

buttonText:按钮呈现的文字

上传文件的类型私下认可为全体文件  ‘All Files’    ‘*.*’

可以通过以下两参数内定,钦点方法见步骤三中的代码:

fileTypeDesc;fileTypeExts;

auto:为true表示采纳文件后活动上传;倘若不想自行上传,需设定为false,并透过

1 <a href=”javascript:$(‘#uploadify’).uploadify(‘upload’)”>上传</a>| 
2 <a href=”javascript:$(‘#uploadify’).uploadify(‘cancel’)”>撤除上传</a>

来内定是上传依然撤销上传;

multi:设置为true将允许多文书上传;

method: 提交方式Post 或Get 暗许为Post;

queueSizeLimit:当允许多文件上传时,设置选用文件的个数,暗中同意值为99九 ;

别的,打消上传图片的门径是安装在css文件中的;

其余更加多设置能够参照官网的相助文书档案。

陆:将上传达成后显得的Complete展现为华语

1位园友提议“

 

英文的Complete不可能改成粤语”,这大概是事先的版本无法展开改动。笔者透过查看源代码 jquery.uploadify-3.一.js找到了上传完结时展现的内容:

 

jQuery 6 

再参考官方的扶持文书档案,能够查出,在“

jQuery, 

onUploadSuccess
事件中能够安装上传完毕后所推行的代码,则修改后的代码为:

 

 jQuery 7

 

再有三个亟待小心的1些是:一般在设定了增选上传文件路径时比如只同意上传*.jpg;*.png;*.gif格式的图纸文件,则除此而外钦赐fileTypeDesc;fileTypeExts;五个参数外,还要在劳务器端即一般处理程序中另行对上传文件的文本扩张名进行判断,避防局地用户跳过客户端验证上传恶意文件。

上边附上本人在腾讯网找到的那两篇介绍uploadify的稿子链接,供大家参考:

JQuery上传插件Uploadify使用详解

选取插件uploadify完成ajax效果的图形上传

并附上uploadify的官方网址 

自己收10的开发包:整理uploadify-v3.1.NET开发包

自然,那可是是一个回顾的试用,具体用到花色中还要考虑很多地点的难点。

相关文章

网站地图xml地图