你的位置:首页 > ASP.net教程

[ASP.net教程]uploadify在asp中的试用小结


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

一.使用步骤

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

  2.新建asp 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 "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.参数和方法中文说明