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

来源:互联网 发布:kali linux和centos 编辑:程序博客网 时间:2024/06/05 17:36

效果

选择图片

选择图片

上传成功

上传成功

显示此次的上传图片列表

显示此次的上传图片列表

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. 外观太丑。所以不建议放到前台页面去操作。
0 0