花了差不多一下午的时间,总算把uploadify插件运行起来,在此对自己遇到的问题以及过程做一个小结。

一.使用步骤

  1.在官网下载最新的插件包,并将包解压。

  2.新建asp.net web项目,将解压得到的包放入项目中。

  3.在建好的项目中右键添加Generic Handler类型文件后缀为ashx,用于接收通过插件传过来的文件流,并做相关处理,将文件存入指定文件夹等操作。

  4.新建存放上传文件的文件夹,新建操作页面。

      项目结构图

      

  5.在操作页面中UploadFile.asp中添加引用文件css和js文件。

  

<link href="JS/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/uploadify/jquery-1.4.1.min.js"></script>
 <script type="text/javascript" src="js/uploadify/jquery.uploadify.js"></script>
View Code

  6.UploadFile.asp中的代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="JS/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/uploadify/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/uploadify/jquery.uploadify.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#uploadify").uploadify({
                //指定swf文件
                'swf': 'js/uploadify/uploadify.swf',
                //后台处理的页面
                'uploader': 'UploadHandler.ashx',
                //按钮显示的文字
                'buttonText': '上传图片',
                //显示的高度和宽度,默认 height 30;width 120
                //'height': 15,
                //'width': 80,
                //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'fileTypeDesc': 'Image Files',
                //允许上传的文件后缀
                'fileTypeExts': '*.gif; *.jpg; *.png',
                //发送给后台的其他参数通过formData指定
                //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
                //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
                //'queueID': 'fileQueue',
                //选择文件后自动上传
                'auto': false,
                //设置为true将允许多文件上传
                'multi': true
            });
        });
    
    </script>
</head>
<body>
 <%--fileQueue div为文件队列区域--%>
    <div id="fileQueue">
    </div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
        <a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>| 
        <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>
    </p>
</body>
</html>

  7.一般处理程序文件UploadHander.ashx文件中的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
namespace test
{
    /// <summary>
    /// Summary description for UploadHandler
    /// </summary>
    public class UploadHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //接收上传文件
            HttpPostedFile file = context.Request.Files["Filedata"];
            //获取文件的保存路径
            string uploadPath =
                HttpContext.Current.Server.MapPath("UploadImages" + "\\");
            //判断上传的文件是否为空

            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
                context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0");
            }  
        }

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

二.遇到问题以及注意事项

  1.新版的参数可能会有变化,在使用过程中,出现点击选择图片按钮之后没有反应。查来查去不得其解,后来终于发现新版本中  

  指定swf文件参数设置为:'swf': 'js/uploadify/uploadify.swf',而在旧版本中为'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',

  2.官网上有较为详细的使用方法,参数说明等可以参考使用。

三.参考文章连接

  1.jquery无刷新上传之uploadify简单试用

  2.参数和方法中文说明