欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery Uploadify上传带进度条的简单实例

程序员文章站 2022-05-30 22:56:42
代码如下: <%@ page language="c#" autoeventwireup="true" codefile=&qu...

代码如下:


<%@ page language="c#" autoeventwireup="true" codefile="upload.x.cs" inherits="uploadifydemo_upload" %>

 

<html xmlns="https://www.w3.org/1999/xhtml">
<head id="head1" runat="server">
    <title>jquery uploadify上传带进度条</title>
    <link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
    <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#uploadify").uploadify({
                'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径
                'script': 'uploadhandler.ashx', //处理文件上传的后台脚本的路径
                'cancelimg': 'js/jquery.uploadify-v2.1.4/cancel.png',
                'folder': 'uploadfile/<% = subpathname %>', //上传文件夹的路径
                'queueid': 'filequeue', //页面中,你想要用来作为文件队列的元素的id
                'auto': false, //当文件被添加到队列时,自动上传
                'multi': true, //设置为true将允许多文件上传
                'fileext': '*.jpg;*.gif;*.png', //允许上传的文件后缀
                'filedesc': 'web image files (.jpg, .gif, .png)', //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'sizelimit': 102400,  //上传文件的大小限制,单位为字节 100k
                'oncancel': function (event, id, fileobj, data) { //当从上传队列每移除一个文件时触发一次
                    alert('the upload of ' + fileobj.name + ' has been canceled!');
                },
                'oncomplete': function (event, id, fileobj, response, data) { //每完成一次文件上传时触发一次
                    alert('there are ' + data.filecount + ' files remaining in the queue.');
                },
                'onallcomplete': function (event, data) { //当上传队列中的所有文件都完成上传时触发
                    alert(data.filesuploaded + ' files uploaded successfully!');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <p>

    </p>
    </form>


    <p id="filequeue"></p>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
        <a href="javascript:$('#uploadify').uploadifyupload()">上传</a>|
        <a href="javascript:$('#uploadify').uploadifyclearqueue()">取消上传</a>
    </p>
</body>
</html>


代码如下:


<%@ webhandler language="c#" class="uploadhandler" %>

 

using system;
using system.web;
using system.io;

public class uploadhandler : ihttphandler
{
    public void processrequest(httpcontext context)
    {
        context.response.contenttype = "text/plain";
        context.response.charset = "utf-8";

        httppostedfile file = context.request.files["filedata"];
        string uploadpath = httpcontext.current.server.mappath(@context.request["folder"]);

        if (file != null)
        {
            if (!directory.exists(uploadpath))
       nbsp;     {
                directory.createdirectory(uploadpath);
            }
            file.saveas(path.combine(uploadpath, file.filename));
            context.response.write("1");
        }
        else
        {
            context.response.write("0");
        }
    }

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