效果
选择图片
上传成功
显示此次的上传图片列表
html代码
<script src="swfobject.js" type="text/javascript"></script>
<div id="UploadZone"></div>
C#代码(UpFile.aspx)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using Common.Base;
namespace Web{
public partial class UpFile : System.Web.UI.Page
{
/// <summary>
/// 批量上传图片处理及获取上传文件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (Session["admin"] != null)
{
try
{
string Type = Request.QueryString["Type"];
string UploadID = Request.QueryString["UploadID"];
string Directory = Request.QueryString["Directory"];
if (Type.IndexOf("upload")>=0)
{
string[] paramArray = Type.Split('/');
Directory = paramArray[1];
UploadID = paramArray[2];
HttpFileCollection files = Request.Files;
// 服务器端存储文件的文件夹(磁盘路径)
string path = Server.MapPath("/Upload/" + Directory);
if (!System.IO.Directory.Exists(path))
{
System.IO.Directory.CreateDirectory(path);
}
// 只取第 1 个文件,因为客户端的flash会循环提交
HttpPostedFile file = files[0];
if (file != null && file.ContentLength > 0)
{
// flash 会自动发送文件名到 Request.Form["fileName"] ,当然了你可以使用Guid给命名文件命名,防止覆盖掉重名文件
string houzui = Path.GetExtension(file.FileName).ToLower();
string tempName = DateTime.Now.ToString("yyyyMMddHHmmss") + DateTime.Now.Millisecond + houzui;
string savePath = path + "/" + tempName;
file.SaveAs(savePath);
//////////////////////////////////////////////////////////////////////
// 在这里你可以做关于数据库的其他操作,例如将文件信息保存到数据库
string saveSQLPath = "/Upload/" + Directory + "/" + tempName;
if (Cache[UploadID]!=null)
{
Cache[UploadID] = Cache[UploadID].ToString() + ","+saveSQLPath;
}
else
{
Cache.Insert(UploadID, saveSQLPath);
}
}
}
else
{
if (Cache[UploadID] != null)
{
string Images = Cache[UploadID].ToString();
Cache.Remove(UploadID);
Response.Write(Images);
}
}
}
catch (Exception ex)
{
LogMsg.WriteLog(ex.ToString());
Response.Write("异常");
}
}
else
{
Response.Write("请登录后操作");
}
}
}
}
js部分
var UploadID="";//本次上传ID
$(function () {
//批量上传图片初始化配置
UploadID = (new Date()).getTime();
var uploadUrl = "/UpFile.aspx?Type=upload/XiaoWuPage/" + UploadID;
//uploadImage.swf只支持一个参数
var params = {
uploadServerUrl: uploadUrl,
//上传响应页面(必须设置)
jsFunction: "UploadCallBack",
//上传成功后回调JS
filter: "*.jpg;*.gif;*.png"//上传文件类型限制
}
swfobject.embedSWF("/uploadImage.swf", "UploadZone", "715", "500", "10.0.0", "/expressInstall.swf", params);
});
//上传回调处理,将已上传的图片放到图片列表里
function UploadCallBack() {
$.ajax({
url: "/UpFile.aspx?Type=getInfo&UploadID=" + UploadID,
success: function (e) {
if (e != "") {
var data = e.split(',');
for (var i = 0; i < data.length; i++) {
$("#ImagesDiv").append("<img class=\"img\" src=\""+data[i]+"\" />");
}
}
}
})
}
以上,End.
缺点:
- uploadImage.swf的uploadServerUrl参数竟然不支持&多参数传递,oh!
- 外观太丑。所以不建议放到前台页面去操作。
版权声明:本文为hougelou原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。