您的位置:首页 > 其它

使用uploadImage.swf实现多图片上传

2017-02-18 20:34 465 查看

效果

选择图片



上传成功



显示此次的上传图片列表



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!

外观太丑。所以不建议放到前台页面去操作。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: