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'未定义，原因就是没开通权限!

官方网：

http://digitarald.de/