为了记录工作中碰到的各种问题，以及学习资料整理，今天开始，将以往的文章进行了一个整理，以后也开始认真的记录学习过程中的各种问题
在HTML里面的文件上传功能一直是个问题，为了实现上传文件大小限制，怎样显示进度条问题，以及上传前图片预览，也试过各种办法，直到有一天看到百度编辑器中的图片上传功能。花了点功夫把他单独提取出来。
最终效果图如下：
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" alt="" />
这个功能可以提供多个图片文件选择，预览，然后对上传的图片在上传队列中删除，以及旋转和，上传中进度条显示，以及上传相册的选择。
源代码下载路径为: http://pan.baidu.com/s/13iNYw
结构
1：FLASH文件：imageUploader.swf
用来显示上传队列，并提供图片增加，预览，删除，旋转，以及进度条的显示功能！
包括了一些参数设置，例如上传处理程序，以及相关的属性设置。其中最重要参数为:flashvars, 他的值经过URL编码。
URL编码转换功能，你可以通过http://tool.chinaz.com/Tools/URLEncode.aspx 这个工具实现。
原始值为:
class="brush:html;gutter:true;">container=flashContainer&url=/BaiduUE/imageUp&ext={"param1":"value1", "param2":"value2"}&fileType={"description":"图片", "extension":"*.gif;*.jpeg;*.png;*.jpg"}&flashUrl=imageUploader.swf&width=608&height=272&gridWidth=121&gridHeight=120&picWidth=100&picHeight=100&uploadDataFieldName=upfile&picDescFieldName=pictitle&maxSize=4&compressSize=2&maxNum=32&compressSide=0&compressLength=900
备注
2：JS脚本
用来于处理外部相册选择，以及FLASH事件相应，以及调用FLASH上传功能来实现图片上传
javascript;gutter:true;">/***********************Flash事件*****************************/
/**
* 检查flash状态
* @private
* @param {Object} target flash对象
* @return {Boolean}
*/
function _checkReady(target) {
if (typeof target !== 'undefined' && typeof target.flashInit !== 'undefined' && target.flashInit()) {
return true;
} else {
return false;
}
}
/**
* 创建一个随机的字符串
* @private
* @return {String}
*/
function _createString() {
var prefix = 'mw__flash__';
return prefix + Math.floor(Math.random() * 2147483648).toString(36);
}
/**
* 为传入的匿名函数创建函数名
* @private
* @param {String|Function} fun 传入的匿名函数或者函数名
* @return {String}
*/
function _createFunName(fun) {
var name = '';
name = _createString();
window[name] = function () {
fun.apply(window, arguments);
};
return name;
}
/***
反复判断Flash是欧加载完成,完成后为Flash添加回调函数..
*/
var interval = setInterval(function () {
try {
var flash = thisMovie("flash");
if (_checkReady(flash)) { //轮询flash的某个方法即可
var callBack = [];
callBack[0] = _createFunName(selectFileCallback);
callBack[1] = _createFunName(exceedFileCallback);
callBack[2] = _createFunName(deleteFileCallback);
callBack[3] = _createFunName(StartUploadCallback);
callBack[4] = _createFunName(uploadCompleteCallback);
callBack[5] = _createFunName(uploadErrorCallback);
callBack[6] = _createFunName(allCompleteCallback);
callBack[7] = _createFunName(changeHeightCallback);
thisMovie("flash").call('setJSFuncName', [callBack]);
clearInterval(interval);
}
}
catch (ex) {
}
}, 20);
//获得Flash对象
function thisMovie(movieName) {
if (navigator.appName.indexOf("Misrosoft") != -1) {
return window[movieName];
}
else {
return document[movieName];
}
}
3：一般处理程序：Upload.ashx
用来实现ASP.NET图片服务器保存
string state = "SUCCESS";
string URL = null;
string currentType = null;
string uploadpath = null;
string filename = null;
string originalName = null;
HttpPostedFile uploadFile = null;
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write(UploadPoto(context));
}
#region 照片上传
public string UploadPoto(HttpContext context)
{
int aid = Convert.ToInt32(context.Request.Form["aid"]); //获得相册ID
bool mark = Convert.ToString(context.Request.Form["mark"]).ToLower() == "true"; //获得是否有水印
//上传配置
string pathbase = "Upload/" + aid.ToString(); //保存路径
int size = 2; //文件大小限制,单位MB
string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式
//上传图片
Hashtable info = new Hashtable();
info = upFile(context,pathbase, filetype, size, mark); //获取上传状态
string title = getOtherInfo(context,"pictitle"); //获取图片描述
string oriName = getOtherInfo(context,"fileName"); //获取原始文件名
string ret = "{'url':'" + info["url"] + "','title':'" + title + "','original':'" + oriName + "','state':'" + info["state"] + "'}";
return ret;
}
private Hashtable upFile(HttpContext context,string pathbase, string[] filetype, int size, bool mark)
{
pathbase = pathbase + "/";
uploadpath = context.Server.MapPath(pathbase);//获取文件上传路径
try
{
uploadFile = context.Request.Files[0];
originalName = uploadFile.FileName;
//目录创建
createFolder();
//格式验证
if (checkType(filetype))
{
state = "不允许的文件类型";
}
//大小验证
if (checkSize(size))
{
state = "文件大小超出网站限制";
}
//保存图片
if (state == "SUCCESS")
{
filename = reName();
string smallPath = reSmallName();
string waterPath = rePicName();
uploadFile.SaveAs(uploadpath + filename);
string savePath = uploadpath + filename;
ImageClass imageClass = new ImageClass();
if (imageClass.ShowThumbnail(savePath, uploadpath + smallPath, 640)) //如果有小图,则删除原图
{
FileInfo fi = new FileInfo(savePath);
fi.Delete();
URL = pathbase + smallPath;
filename = smallPath;
}
else
{
URL = pathbase + filename;
}
if (mark)
{
string watxt = "我是水印哈。。。";
if (ImageClass.WriterText(uploadpath + filename, uploadpath + waterPath, watxt))
{
URL = pathbase + waterPath;
filename = waterPath;
}
}
}
}
catch (Exception e)
{
state = "未知错误";
URL = "";
}
return getUploadInfo();
}
#endregion
#region 上传文件的辅助方法
/**
* 获取文件信息
* @param context
* @param string
* @return string
*/
protected string getOtherInfo(HttpContext context,string field)
{
string info = null;
if (context.Request.Form[field] != null && !String.IsNullOrEmpty(context.Request.Form[field]))
{
info = field == "fileName" ? context.Request.Form[field].Split(',')[1] : context.Request.Form[field];
}
return info;
}
/**
* 获取上传信息
* @return Hashtable
*/
protected Hashtable getUploadInfo()
{
Hashtable infoList = new Hashtable();
infoList.Add("state", state);
infoList.Add("url", URL);
if (currentType != null)
infoList.Add("currentType", currentType);
if (originalName != null)
infoList.Add("originalName", originalName);
return infoList;
}
/**
* 重命名文件
* @return string
*/
protected string reName()
{
return System.Guid.NewGuid() + getFileExt();
}
protected string reSmallName()
{
return System.Guid.NewGuid() + "_Small" + getFileExt();
}
protected string rePicName()
{
return System.Guid.NewGuid() + "_poto" + getFileExt();
}
/**
* 文件类型检测
* @return bool
*/
protected bool checkType(string[] filetype)
{
currentType = getFileExt();
return Array.IndexOf(filetype, currentType) == -1;
}
/**
* 文件大小检测
* @param int
* @return bool
*/
protected bool checkSize(int size)
{
return uploadFile.ContentLength >= (size * 1024 * 1024);
}
/**
* 获取文件扩展名
* @return string
*/
protected string getFileExt()
{
string[] temp = uploadFile.FileName.Split('.');
return "." + temp[temp.Length - 1].ToLower();
}
/**
* 按照日期自动创建存储文件夹
*/
protected void createFolder()
{
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
}
#endregion
更详细的内容请参考源代码 ，对于有童鞋说不支持Chrome，我想应该是Flash的HTML编码问题，最近较忙，就不花时间去处理了。
相关文章
