织梦前台上传参考jQuery Uploadify 3.2上传插件使用
做啦
下载下来解压后估计里面很多文件，其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦，jQuery库那是必须的。
在你使用的项目中，把jquery.uploadify.js引入以后，用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件，版本2.2以上的。使用方法例如：
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/UploadHandler.ashx',
width : 120
});
});
|
，上面的只是简单的事例，下面我就把我在项目中做的发出来，每个都有解释：file_upload_1其实也就是一个容器ID，比如
$(document).ready(function() {
$("#file_upload").uploadify({
//开启调试
'debug' : false,
//是否自动上传
'auto':false,
//超时时间
'successTimeout':99999,
//附带值
'formData':{
'userid':'用户id',
'username':'用户名',
'rnd':'加密密文'
},
//flash
'swf': "uploadify.swf",
//不执行默认的onSelect事件
'overrideEvents' : ['onDialogClose'],
//文件选择后的容器ID
'queueID':'uploadfileQueue',
//服务器端脚本使用的文件对象的名称 $_FILES个['upload']
'fileObjName':'upload',
//上传处理程序
'uploader':'imageUpload.php',
//浏览按钮的背景图片路径
'buttonImage':'upbutton.gif',
//浏览按钮的宽度
'width':'100',
//浏览按钮的高度
'height':'32',
//expressInstall.swf文件的路径。
'expressInstall':'expressInstall.swf',
//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeDesc':'支持的格式：',
//允许上传的文件后缀
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
//上传文件的大小限制
'fileSizeLimit':'3MB',
//上传数量
'queueSizeLimit' : 25,
//每次更新上载的文件的进展
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
//有时候上传进度什么想自己个性化控制，可以利用这个方法
//使用方法见官方说明
},
//选择上传文件后调用
'onSelect' : function(file) {
},
//返回一个错误，选择文件的时候触发
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
},
//检测FLASH失败调用
'onFallback':function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
//上传到服务器，服务器返回相应信息到data里
'onUploadSuccess':function(file, data, response){
alert(data);
}
});
});
|
上传后台处理程序UploadHandler.ashx：大体上常用的我想也就这些，至于后端处理上传部分，我这里就不多讲了，和普通的文件上传处理方式是一样的。
/// <summary>
/// UploadHandler 的摘要说明
/// </summary>
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
try
{
context.Response.ContentType = "text/plain";
//接收上传后的文件
HttpPostedFile file = context.Request.Files["Filedata"];
//其他参数
//string somekey = context.Request["someKey"];
//string other = context.Request["someOtherKey"];
//获取文件的保存路径
//string uploadPath = HttpContext.Current.Server.MapPath("UploadImages" + "\\");
string uploadPath = context.Request.Form["uploadPath"];
//没有指定上传路径，则使用默认路径
if (string.IsNullOrEmpty(uploadPath) || uploadPath == "")
{
uploadPath = string.Format("/upload/images/{0}/{1}/", DateTime.Now.Year, DateTime.Now.Month.ToString("D2"));
}
string fullUploadPath = HttpContext.Current.Server.MapPath(uploadPath);
//判断上传的文件是否为空
if (file != null)
{
if (!Directory.Exists(fullUploadPath))
{
Directory.CreateDirectory(fullUploadPath);
}
//文件名
string _filename = context.Request.Form["uploadFileName"];
//没有指定文件名，则生成一个随机文件名
if (string.IsNullOrEmpty(_filename) || _filename == "")
{
DateTime _temDT = DateTime.Now;
//扩展名
string sExt = file.FileName.Substring(file.FileName.LastIndexOf(".")).ToLower();
//生成随机数
int digit = 6;
Random _rnd = new Random();
string rnd = _rnd.Next((int)Math.Pow(10, digit), (int)Math.Pow(10, digit + 1)).ToString();
//文件名
_filename = string.Format("{0}{1}{2}", _temDT.Ticks.ToString(), rnd, sExt);
}
//保存文件
file.SaveAs(fullUploadPath + _filename);
context.Response.Write(string.Format("{{\"code\":\"1\",\"msg\":\"上传成功\",\"filePath\":\"{0}\",\"fileName\":\"{1}\"}}", uploadPath + _filename, _filename));
}
else
{
context.Response.Write("{{\"code\":\"0\",\"msg\":\"没有要上传的文件！\"}}");
}
}
catch (Exception ex)
{
context.Response.Write(string.Format("{{\"code\":\"0\",\"msg\":\"{0}\"}}", ex.Message));
}
finally
{
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
|
