因为公司项目需要上传文件,所以用了基于flash的uploadify-v3.2.1版本开发的,现做下笔记,代码中有参考其他网友写的demo,所以直接拿代码来用了。
需要注意的是电脑必须得安装flash控件(基于html5的uploadify版本居然要收费5美元,鄙视一下)。
js引用:
<link href="../JS/uploadify-v3.2.1/uploadify.css" rel="stylesheet" />
<script type="text/javascript" src="../Easyui/jquery.min.js"></script>
<script src="../JS/uploadify-v3.2.1/jquery.uploadify.min.js"></script>
js代码:
var desc, ext;
switch (type) {
case 2:
desc = '支持格式(*.gif;*.jpg;*.png;*.bmp)';
ext = '*.gif;*.jpg;*.png;*.bmp;*.jpge';
break;
case 3:
desc = '支持格式(*.mp3)';
ext = '*.mp3';
break;
case 4:
desc = '支持格式(*.mp4)';
ext = '*.mp4';
break;
}
$('#file_upload').uploadify({
'uploader': '../Pub/RambleHandler.ashx', // 服务器处理地址
'swf': '../JS/uploadify-v3.2.1/uploadify.swf?var=' + (new Date()).getTime(),
'cancelImg': '../JS/uploadify-v3.2.1/uploadify-cancel.png',
'folder': '../RambleFile', //保存目录
'checkExisting': true, //检测服务器是否已经存在相同文件
'buttonText': "选择需要上传的文件", //按钮文字
'height': 30, //按钮高度
'width': 120, //按钮宽度
'fileSizeLimit': "2GB", //上传文件的大小限制 0则表示无限制
'fileTypeExts': ext, //允许的文件类型
'fileTypeDesc': desc, //文件说明
//'formData': { "imgType": "normal" }, //提交给服务器端的参数
'overrideEvents': ['onDialogClose'], //onDialogClose 取消自带的错误提示
'onFallback': function () {
alert("您未安装FLASH控件,无法上传!请安装FLASH控件后再试。");
},
'onUploadStart': function (file) {
$("#uploadify").uploadify("settings", "formData", { id: id, point: point, type: type, oldFile: name }); //动态设置参数
},
'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;
}
return false;
},
'onUploadSuccess': function (file, data, response) { //一个文件上传成功后的响应事件处理
if (data) {
try {
data = JSON.parse(data);
if (data.result === true) {
alert("上传成功");
} else {
alert(data.msg);
}
} catch (e) {
alert(data);
}
}
},
'onUploadError': function (file, errorCode, errorMsg, errorString) {
alert(errorString);
}
});
body内容:
<input type="file" name="file_upload" id="file_upload" />
后台处理代码:
using Inspector.Services;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
public class RambleHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string result = "";
try
{
context.Response.Charset = "utf-8";
string saveFileName = "";
string id = context.Request.Form["id"];
string point = context.Request.Form["point"];
string type = context.Request.Form["type"];
string oldFile = context.Request.Form["oldFile"];
string physicsPath = context.Server.MapPath("~/RambleFile/");
if (string.IsNullOrEmpty(id) || string.IsNullOrEmpty(point) || string.IsNullOrEmpty(type))
{
result = JsonHelper.JsonSerialize(new { result = false, msg = "参数为空" });
}
else
{
if (!Directory.Exists(physicsPath))
Directory.CreateDirectory(physicsPath);
HttpPostedFile file = context.Request.Files["Filedata"];
string fileName = file.FileName;
string fileType = fileName.Substring(fileName.LastIndexOf(".") + 1);
if (!string.IsNullOrEmpty(fileName))
saveFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + System.IO.Path.GetFileName(fileName);
if (!string.IsNullOrEmpty(saveFileName))
file.SaveAs(physicsPath + "\\" + saveFileName);
if (File.Exists(physicsPath + "\\" + oldFile))
File.Delete(physicsPath + "\\" + oldFile);//删除旧文件
result = JsonHelper.JsonSerialize(new { result = true, msg = saveFileName });
}
}
catch (Exception ex)
{
result = JsonHelper.JsonSerialize(new { result = false, msg = ex.Message });
}
context.Response.Write(result);
}
public bool IsReusable
{
get { return false; }
}
}