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

  • Post author:
  • Post category:其他


效果

选择图片

选择图片

上传成功

上传成功

显示此次的上传图片列表

显示此次的上传图片列表

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.

缺点:

  1. uploadImage.swf的uploadServerUrl参数竟然不支持&多参数传递,oh!
  2. 外观太丑。所以不建议放到前台页面去操作。



版权声明:本文为hougelou原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。