cnblogs的第一篇博文，放假前的最后一天班。
因为放完假要做一个小项目，年前先拆分下各个部分，其中有上传文件这一块。在网上找了jquery uplodify插件的使用方法，于是照着其他博文尝试。最终简单的功能是实现了，不过也费了不少劲，汗颜。做下总结。
1. 主要引入的文件
| Uploadify.css | 该文件包括插件所用样式 |
| Uploadify.swf | 进度条 |
| Cancel.png | 显示在进度条上的取消按钮 |
| Jquery.js（v1.4.4） | js库文件 |
| Jquery_uploadify.js（v2.1.4） Swfobject.js（v2.2） |
主要文件 |
2. Uploadify插件主要参数（参考http://www.uploadify.com/documentation/）
uploadify:function(options) {
jQuery(this).each(function(){
var settings = jQuery.extend({
id : jQuery(this).attr('id'), // The ID of the object being Uploadified
uploader : 'uploadify.swf', // The path to the uploadify swf file
script : 'uploadify.php', // The path to the uploadify backend upload script
expressInstall : null, // The path to the express install swf file
folder : '', // The path to the upload folder
height : 30, // The height of the flash button
width : 120, // The width of the flash button
cancelImg : 'cancel.png', // The path to the cancel image for the default file queue item container
wmode : 'opaque', // The wmode of the flash file
scriptAccess : 'sameDomain', // Set to "always" to allow script access across domains
fileDataName : 'Filedata', // The name of the file collection object in the backend upload script
method : 'POST', // The method for sending variables to the backend upload script
queueSizeLimit : 999, // The maximum size of the file queue
simUploadLimit : 1, // The number of simultaneous uploads allowed
queueID : false, // The optional ID of the queue container
displayData : 'percentage', // Set to "speed" to show the upload speed in the default queue item
removeCompleted : true, // Set to true if you want the queue items to be removed when a file is done uploading
onInit : function() {}, // Function to run when uploadify is initialized
onSelect : function() {}, // Function to run when a file is selected
onSelectOnce : function() {}, // Function to run once when files are added to the queue
onQueueFull : function() {}, // Function to run when the queue reaches capacity
onCheck : function() {}, // Function to run when script checks for duplicate files on the server
onCancel : function() {}, // Function to run when an item is cleared from the queue
onClearQueue : function() {}, // Function to run when the queue is manually cleared
onError : function() {}, // Function to run when an upload item returns an error
onProgress : function() {}, // Function to run each time the upload progress is updated
onComplete : function() {}, // Function to run when an upload is completed
onAllComplete : function() {} // Function to run when all uploads are completed
}
3. 使用该插件主要添加的两个文件
a） Default.aspx ：用于显示和配置上述参数
b）Uploadfile.ashx ：后台处理上传文件（.cs、.aspx.cs等等文件都可以做后台文件，个人感觉ashx比aspx安全，比.cs方便）
4. 注意点
a）Default.aspx中要有<div id="fileQueue"></div>,显示进度条用
b）web.config中<system.web>内添加节点
<httpRuntime maxRequestLength="1000"/>，maxRequestLength 单位为kb（应该是kb，没有查资料，只是自己调试）。选择上传的文件大小不能超过这个值
5. 简单实现
a）Select按钮浏览要上传的文件， Upload Files上传按键
b）点击select，选择文件后
c) 上传成功
d）上传失败
Default.aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryUpLoadFile.Default" %>
<!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="css/uploadify.css" rel="Stylesheet" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery_uploadify.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<style type="text/css">
.div_uploaddiv a
{
color: #0072BC;
text-decoration: none;
}
.divMain
{
background-color: #FFFFFF;
width: 350x;
margin: 100px 0 0 300px;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#file_upload").uploadify({
'fileDataName': 'Filedata',
'uploader': '/Flash/uploadify.swf',
'script': '/uploadfile.ashx', //后台处理
'cancelImg': '/images/cancel.png', //单个取消按钮
//'buttonImg': '/images/acurapartswarehouse.com.png',
//'folder': '/uploadfile', //文件夹
'queueID': 'fileQueue', //文件队列
'auto': false, //true：选择文件后自动开始上传；false：手动触发
'multi': true, //多文件上传，
'simUploadLimit': '4', //The number of simultaneous uploads allowed
'fileExt': '*.doc;*.pdf;*.rar;*.zip;*.7z;*.chm;*.jpg;*.gif;*.png;*.bak', //.jpg,.bmp,.gif,.png,.doc,.pdf,.rar,.zip,.7z,可上传文件
'fileDesc': '*.doc;*.pdf;*.rar;*.zip;*.7z;*.chm;*.jpg;*.gif;*.png;*.bak', //显示的文件类型
'buttonText': 'select',
'width': '100',
'height': '32',
'removeCompleted': false,
'sizeLimit': '100000000', //大小限制，100M
'queueSizeLimit': 3, //The maximum size of the file queue
//'onError': function(event, queueID, fileObj, errorObj) {
// alert('error ' + errorObj.type);
//},//返回错误信息
//'onComplete': function (event, queueID, fileObj, response, data) {
// alert(respone);
//},
'onComplete': function(event, queueID, fileObj, response, data) {
//alert("成功上传,平均速率："+data.speed+"kb/s");
if (response == "0")
$("#haveupfile").append("<p style='color:#f00'>上传" + fileObj.name + "失败！</p>");
else if (response == "1")
$("#haveupfile").append("<p style='color:#f00'>" + fileObj.name + "文件格式错误！</p>");
},
'onAllComplete': function(event, data) {
$("#haveupfile").append("<p>成功上传<b>" + data.filesUploaded + "个文件</b></p>");
}
});
});
</script>
</head>
<body>
<div class="divMain">
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="file_upload" />
<div class="div_uploaddiv">
<a id="uploadtag" href="javascript:$('#file_upload').uploadifyUpload()">Upload Files</a>
</div>
<div id="haveupfile">
</div>
</div>
</body>
</html>
后台文件上传代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Configuration;
namespace JqueryUpLoadFile
{
/// <summary>
/// uploadfile 的摘要说明
/// </summary>
public class uploadfile : IHttpHandler
{
public string extensionlimit = ".doc,.pdf,.rar,.zip,.doc,.7z,.chm,.jpg,.gif,.png,.bak";//用逗号隔开,小写..
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
string fileFullName = string.Empty;
string uploadPath = string.Empty;
string fileContain = string.Empty;
try
{
HttpPostedFile postedFile = context.Request.Files["Filedata"];
uploadPath = context.Request.PhysicalApplicationPath + ConfigurationManager.AppSettings["filePath"];
fileFullName = uploadPath + Path.GetFileName(postedFile.FileName);
if (postedFile != null)
{
fileContain =Path.GetExtension(postedFile.FileName).ToLower();
if (extensionlimit.Contains(fileContain))
{
if (fileFullName != "")
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
}
postedFile.SaveAs(fileFullName);
//下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
//返回网络路径
context.Response.Write(fileFullName);
}
else
{
context.Response.Write("1");//扩展验证失败
}
}
else
{
context.Response.Write("0");//验证失败
}
}
catch (Exception ex)
{
context.Response.Write(ex.Message);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
写的有些累赘；添加表格后竟然不会删。。还得靠F12调样式，各位笑看。
先祝各位新年好，好运来，身体健康，阖家幸福