uploadify3.2.1版插件在ASP.NET中的使用

最新推荐文章于 2015-11-18 14:08:40 发布

SCIOO

最新推荐文章于 2015-11-18 14:08:40 发布

阅读量1.9k

点赞数

分类专栏： ASP.NET ASP.NET MVC 文章标签： uploadify3.2.1版插件在AS

本文链接：https://blog.csdn.net/SCIOO/article/details/12276355

版权

ASP.NET 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ASP.NET MVC

1 篇文章 0 订阅

订阅专栏

0.先去官网下载插件下载uploadify3.2.1插件

解压后只需要一下文件：

（1） jquery.uploadify.min.js

（2） uploadify.css

（3） uploadify.swf

但是运用到网站后需要应用Jquery 1.4以上版本

1.ASP.NET Web Form

简单配置.ASPX文件

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" href="Content/uploadify/uploadify.css" />
    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Content/uploadify/jquery.uploadify.min.js"></script>
</head>
<body>
    <input id="file_upload" name="file_upload" type="file" multiple="multiple"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#file_upload").uploadify({
                'swf': 'Content/uploadify/uploadify.swf',
                'auto': true,
                'multi': true,
                'uploader': 'UploadHandler.ashx',//指定一般处理程序 执行上传后的文件处理
            });
        });
    </script>
</body>
</html>

创建一般处理程序重新 ProcessRequest

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset="UTF-8";
            HttpPostedFile file=context.Request.Files["Filedata"]; 
            //这个Filedata 是uploadify fileObjName项的默认值
            string path = HttpContext.Current.Server.MapPath("~/LoadFiles") + "\\";
            if (file != null)
            {
                file.SaveAs(path+file.FileName);
            }
        }

2.ASP.NET MVC3

配置View

 <link type="text/css" rel="stylesheet" href=@Url.Content("~/Content/uploadify/uploadify.css") />
<script type="text/javascript" src=@Url.Content("~/Scripts/jquery-1.7.1.min.js")></script>
//我试了很多次，一定要引用Url.Content辅助方法才行
<script type="text/javascript" src=@Url.Content("~/Content/uploadify/jquery.uploadify.min.js")></script>
<script type="text/javascript">
    $(function () {
        $("#file_upload").uploadify({
            'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',
            'auto': true,
            'multi': true,
            'uploader': 'Person/Upload'
        });
    });
</script>
<input id="file_upload" name="file_upload" type="file" multiple="multiple"/>

编写Action 只要捕获到Filedata接算是成功了

        [HttpPost]
        public ActionResult Upload(HttpPostedFileBase Filedata)
        //Filedata不能改名 因为它是uploadify fileObjName项的默认值 除非修改 fileObjName项的默认值
        //不然会报错
       {
            if (Filedata != null)
            {
                //do something.
            }
            return View();
        }

3.ASP.NET MVC4

配置View

<link type="text/css" rel="stylesheet" href=@Url.Content("~/Content/uploadify/uploadify.css") />
<script type="text/javascript" src=@Url.Content("~/Scripts/jquery-1.7.1.min.js")></script>
<script type="text/javascript" src=@Url.Content("~/Content/uploadify/jquery.uploadify.min.js")></script>
<script type="text/javascript">
    $(function () {
        $("#file_upload").uploadify({
            'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',
            'auto': true,
            'multi': true,
            'uploader': '@Url.Action("Upload","Person")',
            'folder': 'UpLoadFiles'
        });
    });
</script>
<input id="file_upload" name="file_upload" type="file" multiple="multiple"/>

：其实和MVC3差不多，只是有一个地方不明白，在MVC4中 
   'uploader': '@Url.Action("Upload","Person")' 写成
   'uploader': 'Person/Upload' 会报错。。。。

编写Action 和MVC3 一样

[HttpPost]
        public ActionResult Upload(HttpPostedFileBase Filedata)
        {
            if (Filedata != null)
            {
                //do something
            }
            return View();
        }

以上只是uploadify插件的简单运用，其还有更多的功能需要慢慢学习

uploadify 3.2.1 参数项:

// Required Settings
                    id       : $this.attr('id'), // The ID of the DOM object
                    swf      : 'uploadify.swf',  // The path to the uploadify SWF file
                    uploader : 'uploadify.php',  // The path to the server-side upload script
                    
                    // Options
                    auto            : true,               // Automatically upload files when added to the queue
                    buttonClass     : '',                 // A class name to add to the browse button DOM object
                    buttonCursor    : 'hand',             // The cursor to use with the browse button
                    buttonImage     : null,               // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button
                    buttonText      : 'SELECT FILES',     // The text to use for the browse button
                    checkExisting   : false,              // The path to a server-side script that checks for existing files on the server
                    debug           : false,              // Turn on swfUpload debugging mode
                    fileObjName     : 'Filedata',         // The name of the file object to use in your server-side script
                    fileSizeLimit   : 0,                  // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
                    fileTypeDesc    : 'All Files',        // The description for file types in the browse dialog
                    fileTypeExts    : '*.*',              // Allowed extensions in the browse dialog (server-side validation should also be used)
                    height          : 30,                 // The height of the browse button
                    itemTemplate    : false,              // The template for the file item in the queue
                    method          : 'post',             // The method to use when sending files to the server-side upload script
                    multi           : true,               // Allow multiple file selection in the browse dialog
                    formData        : {},                 // An object with additional data to send to the server-side upload script with every file upload
                    preventCaching  : true,               // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)
                    progressData    : 'percentage',       // ('percentage' or 'speed') Data to show in the queue item during a file upload
                    queueID         : false,              // The ID of the DOM object to use as a file queue (without the #)
                    queueSizeLimit  : 999,                // The maximum number of files that can be in the queue at one time
                    removeCompleted : true,               // Remove queue items from the queue when they are done uploading
                    removeTimeout   : 3,                  // The delay in seconds before removing a queue item if removeCompleted is set to true
                    requeueErrors   : false,              // Keep errored files in the queue and keep trying to upload them
                    successTimeout  : 30,                 // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading
                    uploadLimit     : 0,                  // The maximum number of files you can upload
                    width           : 120,                // The width of the browse button

：在3.2.1版本中和以前不一样不要乱用像script、cancelImg这样的参数项，是没有用的，反而会把自己弄糊涂

SCIOO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
uploadify3.2.1版插件在ASP.NET中的使用

0.先去官网下载插件下载uploadify3.2.1插件解压后只需要一下文件：（1） jquery.uploadify.min.js （2） uploadify.css
复制链接

扫一扫