FancyUpload3.0

官方网没有.net版本 只有php版 下面是.net版

​​

​​

css:

<style type="text/css">
    
.swiff-uploader-box a {
    display: none !important;
}
 
a:hover, a.hover {
    color: red;
}
 
#demo-status {
    padding: 10px 15px;
    width: 420px;
    border: 1px solid #eee;
}
 
#demo-status .progress {
    background: url(img/progress.gif) no-repeat;
    background-position: +50% 0;
    margin-right: 0.5em;
    vertical-align: middle;
}
 
#demo-status .progress-text {
    font-size: 0.9em;
    font-weight: bold;
}
 
#demo-list {
    list-style: none;
    width: 450px;
    margin: 0;
}
 
#demo-list li.validation-error {
    padding-left: 44px;
    display: block;
    clear: left;
    line-height: 40px;
    color: #8a1f11;
    cursor: pointer;
    border-bottom: 1px solid #fbc2c4;
    background: #fbe3e4 url(img/failed.png) no-repeat 4px 4px;
}
 
#demo-list li.file {
    border-bottom: 1px solid #eee;
    background: url(img/file.png) no-repeat 4px 4px;
    overflow: auto;
}
#demo-list li.file.file-uploading {
    background-image: url(img/uploading.png);
    background-color: #D9DDE9;
}
#demo-list li.file.file-success {
    background-image: url(img/success.png);
}
#demo-list li.file.file-failed {
    background-image: url(img/failed.png);
}
 
#demo-list li.file .file-name {
    font-size: 1.2em;
    margin-left: 44px;
    display: block;
    clear: left;
    line-height: 40px;
    height: 40px;
    font-weight: bold;
}
#demo-list li.file .file-size {
    font-size: 0.9em;
    line-height: 18px;
    float: right;
    margin-top: 2px;
    margin-right: 6px;
}
#demo-list li.file .file-info {
    display: block;
    margin-left: 44px;
    font-size: 0.9em;
    line-height: 20px;
    clear
}
#demo-list li.file .file-remove {
    clear: right;
    float: right;
    line-height: 18px;
    margin-right: 6px;
}

</style>

js:

<script type="text/javascript" src="js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="js/Swiff.Uploader.js"></script>
<script type="text/javascript" src="js/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="js/FancyUpload2.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() { 
var up = new FancyUpload2($('demo-status'), $('demo-list'), { 
verbose: true,
url: $('form-demo').action,
path: 'js/Swiff.Uploader.swf',
typeFilter: {
    'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
},
target: 'demo-browse',
onLoad: function() {
    $('demo-status').removeClass('hide');
    $('demo-fallback').destroy(); 
    this.target.addEvents({
        click: function() {
            return false;
        },
        mouseenter: function() {
            this.addClass('hover');
        },
        mouseleave: function() {
            this.removeClass('hover');
            this.blur();
        },
        mousedown: function() {
            this.focus();
        }
    });

    $('demo-clear').addEvent('click', function() {
        up.remove(); 
        return false;
    });

    $('demo-upload').addEvent('click', function() {
        up.start(); 
        return false;
    });
},

onSelectFail: function(files) {
    files.each(function(file) {
        new Element('li', {
            'class': 'validation-error',
            html: file.validationErrorMessage || file.validationError,
            title: MooTools.lang.get('FancyUpload', 'removeTitle'),
            events: {
                click: function() {
                    this.destroy();
                }
            }
        }).inject(this.list, 'top');
    }, this);
},

onFileSuccess: function(file, response) {
    var json = new Hash(JSON.decode(response, true) || {});

    if (json.get('status') == '1') {
        file.element.addClass('file-success');
        file.info.set('html', '<strong>Image was uploaded:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px, <em>' + json.get('mime') + '</em>)');
    } else {
        file.element.addClass('file-failed');
        file.info.set('html', '<strong>An error occured:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
    }
},

onFail: function(error) {
    switch (error) {
        case 'hidden': 
            alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
            break;
        case 'blocked':
            alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
            break;
        case 'empty': 
            alert('A required file was not found, please be patient and we fix this.');
            break;
        case 'flash': 
            alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
    }
}
});
});
</script>

html:

<form action="Upload.axd" method="post" enctype="multipart/form-data" id="form-demo">
    <fieldset id="demo-fallback">
        <legend>File Upload</legend>
        <p>
            This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
            If this part is not changed, something must be wrong with your code.
        </p>
        <label for="demo-photoupload">
            Upload a Photo:
            <input type="file" name="Filedata" />
        </label>
    </fieldset>
 
    <div id="demo-status" class="hide">
        <p>
            <a href="#" id="demo-browse">浏览</a> |
            <a href="#" id="demo-clear">清除列表</a> |
            <a href="#" id="demo-upload">上传</a>
        </p>
        <div>
            <strong class="overall-title"></strong><br />
            <img src="img/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title"></strong><br />
            <img src="img/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>
 
    <ul id="demo-list"></ul>
 
</form>

后台：

Upload.cs：

using System;
using System.Data;
using System.Configuration;
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;
using System.IO;

/// <summary>
/// Upload handler for uploading files.
/// </summary>
public class Upload : IHttpHandler
{
    public Upload()    {    }

    #region IHttpHandler Members

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";
        HttpPostedFile oFile = context.Request.Files["Filedata"];
        string strUploadPath = HttpContext.Current.Server.MapPath(@"~/Upload"+"\\");
        if (oFile != null)
        {
            if (!Directory.Exists(strUploadPath))
            {
                Directory.CreateDirectory(strUploadPath);
            }
            oFile.SaveAs(strUploadPath + oFile.FileName);

            //context.Response.Write("1");出错 要对应JSON格式?
            context.Response.Write("{\"status\":\"1\",\"name\":\"\",\"hash\":\"\",\"width\":250,\"height\":12,\"mime\":\"image\"}");
        }
        else
        {
            //context.Response.Write("0");
            context.Response.Write("{\"status\":\"0\",\"name\":\"\",\"hash\":\"\",\"width\":250,\"height\":12,\"mime\":\"image\"}");
        }

        // Used as a fix for a bug in mac flash player that makes the 
        // onComplete event not fire
        HttpContext.Current.Response.Write(" ");

    }

    public bool IsReusable
    {
        get { return false; }
    }



    #endregion
}

Web.config：

<httpHandlers>
      
      <remove verb="POST,GET" path="Upload.axd"/>
      <add verb="POST,GET" path="Upload.axd" type="Upload"/>

<httpRuntime maxRequestLength="1550000"/>

实现IHttpHandler 接口可用.axd直接访问

在开发一个上传客户端的时间，实现了IHttpHandler 封装一个新类。目的是给外部程序（如flash,flex,javascrtip）访问。不需要建立html、aspx形式文件。

web.config配置

<system.web>

<httpHandlers>

   <remove verb="POST,GET" path="FlashUpload.axd"/>

   <add verb="POST,GET" path="FlashUpload.axd" type="FlashUpload"/>

  </httpHandlers>

</system.web>

但注意事项，当web.config作了权限配置的话，要对其文件进行权限开通!

<location path="fileupload.axd">

        <system.web>

            <authorization>

                <allow users="*"/>

            </authorization>

        </system.web>

    </location>

这也通用于.axd外的文件。没有权限访问就会访问失败，在 MS Asp.net Ajax 中的就曾看过“脚本错误: 'Sys'未定义，原因就是没开通权限!