文件上传~Uploadify上传控件

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的.

今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它.

相关API介绍

uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。 
script ：   后台处理程序的相对路径 。默认值：uploadify.php 
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 
method ： 提交方式Post 或Get 默认为Post 
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain  
folder ：  上传文件存放的目录 。 
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。 
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。 
multi ： 设置为true时可以上传多个文件。 
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。

fileExt ： 设置可以选择的文件的类型，格式如：'*.jpg;*.gif,*.png' 。

fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择图像文件”，
sizeLimit ： 上传文件的大小限制 。 
simUploadLimit ： 允许同时上传的个数 默认值：1 。 
buttonText ： 浏览按钮的文本，默认值：BROWSE 。 
buttonImg ： 浏览按钮的图片的路径 。 
hideButton ： 设置为true则隐藏浏览按钮的图片 。 
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。 
width ： 设置浏览按钮的宽度 ，默认值：110。 
height ： 设置浏览按钮的高度 ，默认值：30。 
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。 
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

结构图

HTML代码

<div>
    <div class="inputDiv fl">
        <input type="text" name="ImagePath" id="ImagePath" style="width: 600px;">
        <img style="display: none;" />
    </div>
    <div class="fl" style="position: relative;">
        <input id="custom_file_uploadEdu" type="file" class="btn" />
        <a href="javascript:$('#custom_file_uploadEdu').uploadifyUpload()">上传</a>|
      <a href="javascript:$('#custom_file_uploadEdu').uploadifyClearQueue()">取消上传</a>
    </div>
    <div id="displayMsg"></div>
</div>

JS代码

<script type="text/ecmascript">

    $("#custom_file_uploadEdu").uploadify({
        'uploader': '/Scripts/Uploadify/uploadify.swf',
        'script': '/ashx/UploadFile.ashx',
        'cancelImg': '/Scripts/Uploadify/uploadify-cancel.png',
        'folder': '/',
        'queueSizeLimit': 1,
        'simUploadLimit': 1,
        'sizeLimit ': 1024 * 1024 * 5,
        'multi': false,
        'auto': false,/*如果是自动上传,那上传按钮将没用了*/
        'fileExt': '*.jpg;*.gif;*.jpeg;*.mp4',
        'fileDesc': '请选择图像或者视频',
        'queueID': 'fileQueue',
        'width': 110,
        'height': 30,
        'buttonText': '选择',
        'wmode': 'opaque',
        'hideButton': false,
        'onSelect': function (event, ID, fileObj) {
            $("#displayMsg").html("上传中......");
        },
        'onComplete': function (event, queueId, fileObj, response, data) {
            var ary = response.split('|');
            if (ary[0] == "0") { //提示错误信息
                alert(ary[1]);
            }
            else {
                if (ary[0]=="1") {//上传后的URL
                    $("#displayMsg").html("上传成功")
                    $("#ImagePath").attr("value", ary[1]);
                    $("#ImagePath").remove("img").next("img").show().attr({ "style": "width:50px;height:50px;", "src": ary[1] });
                } else {//异常信息
                    alert(ary[1]);
                }
            }
        }
    });
</script>

后台处理程序(接收流,写入流)

namespace WebTest.ashx
{
    /// <summary>
    /// UploadFile 的摘要说明
    /// </summary>
    public class UploadFile : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            context.Response.Write(new UploadImpl().Upload(context, UpLoadType.ProductImage, false));

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

}

UploadImpl类代码

 View Code

效果图

本文转自博客园张占岭（仓储大叔）的博客，原文链接：文件上传~Uploadify上传控件，如需转载请自行联系原博主。