Uploadify3.2.1上传文件

最新推荐文章于 2016-12-21 17:10:36 发布

yw1688

最新推荐文章于 2016-12-21 17:10:36 发布

阅读量1k

点赞数

分类专栏： C# Javascript

本文链接：https://blog.csdn.net/yw1688/article/details/39783961

版权

C# 同时被 2 个专栏收录

269 篇文章 1 订阅

订阅专栏

Javascript

102 篇文章 0 订阅

订阅专栏

以前一直用swfupload上传文件，其它的都还好，就是感觉调用的时候灵活性不够，于是研究了一下uploadify,发觉是要比swfupload要好用。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="uploadfile.aspx.cs" Inherits="UploadfyDemo.uploadfile" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试uploadify</title>
    <link href="uploadify/uploadify.css" rel="stylesheet" />
    <style type="text/css">
        .btnupload {
            width:66px;
            height:24px;
            background:url(/uploadify/upfile.jpg) center center no-repeat;
            border:none;
        }
    </style>
    <script src="js/jquery-1.9.0.min.js"></script>
</head>
<body>

    <div>
        <input type="text" id="mypath" />
        <input type="file" name="myfile" id="file_upload" />
        <!--用来显示队列的容器，对应queueID-->
        <div id="uploadfileQueue"></div>

        <%--手动开始和停止
            <a href="javascript:$('#file_upload').uploadify('upload')">上传</a>| 
            <a href="javascript:$('#file_upload').uploadify('cancel')">取消上传</a>--%>
    </div>
    
    <script src="artDialog5/artDialog.js?skin=aero"></script>
    <script src="uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#file_upload").uploadify({
                //开启调试
                'debug': true,
                //是否自动上传
                'auto': true,
                //超时时间
                'successTimeout': 99999,
                //附带值
                'formData': {
                    ac:"upload",
                    'userid': '用户id'
                },
                //flash
                'swf': "/uploadify/uploadify.swf",
                //不执行默认的onSelect事件
                'overrideEvents': ['onDialogClose'],
                //文件选择后的容器ID
                'queueID': 'uploadfileQueue',
                //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
                'fileObjName': 'myfile',
                //上传处理程序
                'uploader': '/handler/uploadhandler.ashx',
                //浏览按钮的背景图片路径
                //'buttonImage': '/uploadify/upfile.jpg',
                //浏览按钮的宽度
                'width': 66,
                //浏览按钮的高度
                'height': 24,
                buttonText:"选择文件",
                //expressInstall.swf文件的路径。
                'expressInstall': 'expressInstall.swf',
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'fileTypeDesc': '支持的格式：',
                //允许上传的文件后缀
                'fileTypeExts': '*.jpg;*.jpge;*.gif;*.png;*.rar;*.zip',
                //上传文件的大小限制
                'fileSizeLimit': '0',//30MB
                //上传数量
                'queueSizeLimit': 25,
                //每次更新上载的文件的进展
                'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
                    //有时候上传进度什么想自己个性化控制，可以利用这个方法
                    //使用方法见官方说明
                },
                //选择上传文件后调用
                'onSelect': function (file) {
                    
                },
                'fileDialogComplete':function(){},
                //返回一个错误，选择文件的时候触发
                'onSelectError': function (file, errorCode, errorMsg) {
                    switch (errorCode) {
                        case -100:
                            art.dialog({ title: "错误", content: "上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件！" ,icon:"error"});
                            break;
                        case -110:
                            art.dialog({ title: "错误", content: "文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小！" ,icon:"error"});
                            break;
                        case -120:
                            art.dialog({ title: "", content: "文件 [" + file.name + "] 大小异常！",icon:"error" });
                            break;
                        case -130:
                            art.dialog({ title: "错误", content: "文件 [" + file.name + "] 类型不正确！" ,icon:"error"});
                            break;
                    }
                },
                //检测FLASH失败调用
                'onFallback': function () {
                    art.dialog({ title: "错误", content: "您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。" ,icon:"error"});
                },
                //上传到服务器，服务器返回相应信息到data里
                'onUploadSuccess': function (file, data, response) {
                    var json = eval('(' + data + ')');
                    $("#mypath").val(json.Data);
                    $('#' + file.id).find('.data').html(' - 完成');
                },
                scriptAccess: 'always'
            });
        });
    </script>
</body>
</html>

以下是后台处理代码uploadhandler.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using zifar.MenjinSystem.CommonMethod;
using System.Collections.Specialized;
using System.IO;
namespace UploadfyDemo.handler
{
    /// <summary>
    /// uploadhandler 的摘要说明
    /// </summary>
    public class uploadhandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            NameValueCollection frm = context.Request.Form;
            AjaxResultModle rm = new AjaxResultModle { Err=1,Msg="未知错误"};

            string ac = frm["ac"];
            if (ac == "upload")
            {
                string userid = frm["userid"];
                try
                {
                    HttpPostedFile pfile = context.Request.Files["myfile"];
                    if (pfile == null)
                    {
                        return;
                    }
                    string fileformat = pfile.FileName.Substring(pfile.FileName.LastIndexOf(".")).ToLower();
                    string fileflx = ",*.jpg;*.jpge;*.gif;*.png,*.zip,*.rar,";
                    if (!fileflx.Contains(fileformat))
                    {
                        return;
                    }

                    DateTime dtime = DateTime.Now;
                    string filename = string.Format("{0:HHmmssffff}", dtime) + fileformat;
                    string sfolder = string.Format("{0:yyyyMMdd}", dtime);
                    string folderstr = "/upfile/" + sfolder + "/";
                    string folder = context.Server.MapPath(folderstr);
                    if (!Directory.Exists(folder))
                    {
                        IOHelper.CreateFoder(folder);
                    }

                    string filepath = folder + filename;
                    //保存文件
                    pfile.SaveAs(filepath);
                    rm = new AjaxResultModle { Err = 0, Msg = filename, Data = folderstr + filename };
                    return;
                }
                catch (Exception ex)
                {
                    rm = new AjaxResultModle { Err = 1, Msg = ex.Message };
                }
                finally
                {
                    string msg = OutputHelper.GetJsonMsg(rm);
                    context.Response.Write(msg);
                }
            }
        }

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

动态修改uploadify的参数

$('#urlFile').uploadify("settings", "buttonText","选择并上传");