uploadify在asp中的试用小结

来源:互联网 时间:1970-01-01

花了差不多一下午的时间,总算把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>

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.参数和方法中文说明


相关阅读:
Top