jquery.uploadify 使用过程

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>swfupload_ajax_demo</title>
    <link href="../css/Member.css" rel="stylesheet" type="text/css" />
    <link href="../css/base.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link href="../js/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/jquery.uploadify-v2.1.0/swfobject.js"></script>
    <script type="text/javascript" src="../js/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
    <script type="text/javascript">
        var swfu;
        $(document).ready(function () {

            $("#uploadify").uploadify({
                ‘height‘: 30,
                ‘onSelect‘: function (e, queueId, fileObj) {
                    fileObj.name = "mylovemercedes";
                    alert("唯一标识:" + queueId + "\r\n" +
                  "文件名:" + fileObj.name + "\r\n" +
                  "文件大小:" + fileObj.size + "\r\n" +
                  "创建时间:" + fileObj.creationDate + "\r\n" +
                  "最后修改时间:" + fileObj.modificationDate + "\r\n" +
                  "文件类型:" + fileObj.type
                 );

                },
                ‘uploader‘: ‘../js/jquery.uploadify-v2.1.0/uploadify.swf‘,
                ‘script‘: ‘../Handler/UploadHandler.ashx‘,
                ‘scriptData‘: { ‘student_id‘: $(‘#hidStudentID‘).val() },  //自定义传递参数
                ‘method‘: ‘GET‘,
                ‘cancelImg‘: ‘../js/jquery.uploadify-v2.1.0/cancel.png‘,
                ‘folder‘: ‘../upload/student_head‘,
                ‘queueID‘: ‘fileQueue‘,
                ‘auto‘: false,
                ‘multi‘: false,
                ‘width‘: 120,
                ‘fileExt‘: ‘*.jpg;*.png;*.gif‘,
                ‘buttonText‘: "upload image",
                ‘onInit‘: function () { alert("1"); },
                ‘sizeLimit‘: 102400, //上传文件的大小限制,单位为字节 100k
                ‘onAllComplete‘: function (event, data) { //当上传队列中的所有文件都完成上传时触发
                    alert(data.filesUploaded + ‘ 个文件上传成功!‘);
                }
            });
            function uploadpara() {
                //自定义传递参数
                $(‘#uploadify‘).uploadifySettings(‘scriptData‘, { ‘student_id‘: $(‘#hidStudentID‘).val() });
                $(‘#uploadify‘).uploadifyUpload();
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:HiddenField ID="hidStudentID" runat="server" Value="201401030912559732" />
    <div id="fileQueue">
    </div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
        <a href="javascript:$(‘#uploadify‘).uploadifyUpload()">上传</a>| <a href="javascript:$(‘#uploadify‘).uploadifyClearQueue()">
            取消上传</a>
    </p>
    <div class="hy_photo_main_frame">
    </div>
    </form>
</body>
</html>

.UploadHandler.ashx

public class UploadHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
            string student_id = CommonClass.Request.GetRequest<string>("student_id", "");
            HttpPostedFile file = context.Request.Files["Filedata"];
            string uploadPath =
                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

            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;
            }
        }
    }

jquery.uploadify 使用过程,码迷,mamicode.com

时间: 2024-08-01 16:20:50

jquery.uploadify 使用过程的相关文章

详解jQuery uploadify文件上传插件的使用方法

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

[Plugin] JQuery.uploadify上传文件插件的使用详解For ASP.NET

URL:http://www.cnblogs.com/xiaopin/archive/2010/01/21/1653523.html 今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到一个还可以的,本来想改成类似于腾讯QQ相册那种方式,仔细看了一下是Flash的, 而且那个极速上传插件也不知道用什么做的?问了一下,说是什么cgi. 搞得一头雾水! 后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..!

jQuery uploadify 文件上传

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo演示 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script t

jquery上传插件Jquery.uploadify.js-转

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFil

SpringMVC+jquery.uploadify 上传文件

前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在Controller Action中用@RequestParam MultipartFile file就能拿到上传文件信息.后我直接使用uploadify的方式上传,接口没有做任何调整,上传的过程中报http400, 客户端的请求不符合接口的要求,表单post提交时报文参数是以Form Data方式,

关于jquery.uploadify.js不兼容IE11

我们使用jquery.uploadify.js插件进行文件上传的时候,可能会遇到在IE11浏览器下点击上传按钮没有反应,看到很多博友们说的天花烂坠,最后问题没有解决掉,其实问题很简单,只是这个问题又很难被发现,那么接下来进入正式话题---- 之所以IE11没有显示出上传的对话框是因为这个插件的一个样式所导致,既:z-index 解决方案:打开jquery.uploadify.js插件,Ctrl+F,搜索z-index,此刻你会发现插件的z-index:1,就是这个原因导致IE11显示不出来,改成

使用jQuery Uploadify在ASP.NET 上传附件 (转)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuery Uploadify在ASP.NET MVC3中的使用 和 Asp.net Mvc中使用uploadify实现图片缩放保存. 本文是一个简单的介绍Demo,主要是动态传递参数方法:通过formdata 向处理程序传递额外的表单数据: <!DOCTYPE html PUBLIC "-//W3C

Jquery Uploadify多文件上传实例

jQuery Uploadify开发使用的语言是java. 详细的相关文档,可以参考官网的doc:http://www.uploadify.com/documentation/ 官网的讲解还是很详细的,关键是要耐心看.虽说是英文,单有百度翻译. 看官网jQuery uploadify有基于flash和html5 的2个版本.我使用的是基于flash的. Jsp页面引用的文件有: <!-- 转诊单的附件商场页面 --> <script type="text/javascript&

jquery.uploadify+jquery.form异步提交那点事

jquery.uploadify+jquery.form中使用ajaxSubmit提交时没有走提交后的Success事件,一点提交直接Post过去了,然后就结束了,也没走提交完后的事件. 用火狐找了后发现 TypeError: $.handleError is not a function 提交时出现:TypeError: $.handleError is not a function 因为$.handleError 只在jquery-1.4.4之前的版本中存在,jquery-1.6 ,1.7和