代码改变世界

flash上传插件uploadify详解_图片批量上传_更新数据库

2011-08-03 23:08  寂静的神经  阅读(5687)  评论(73编辑  收藏  举报

最近辞职自己出来,比较忙,不怎么看博客,自己去下吧,DEMO下载地址:http://it.02405.com/web/dotnet/775.html

 

前段时间做项目,后台管理中要用到图片批量上传,在网上搜索了一下,发现一半都是用的flash上传插件,不外乎就是swfupload与uploadify等。网上的例子大多讲到了怎么实现批量上传而没说明用到后台管理上要怎么同时更新数据库。

琢磨了半天在某网站看到一句话而豁然开朗。暂时采用的变通方法如下:

 

1.workadd.aspx页面(作品添加页面,包含作品名称,作者,作品内容等)。

本页面中的作品内容一栏要求一次选取多张图片,批量上传。

前台部分代码:

head处代码:

<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>

body中作品内容处代码:

    您可以一次选择多个图片批量上传~
    <div class="wrapper">
        <div id="fileInput1">
        </div>
    </div>
    <script type="text/javascript">
    $("#fileInput1").uploadify({
        'uploader': '/uploadify/uploadify.swf',
        'script': '<%=temp %>',
        'cancelImg': '/uploadify/cancel.png',
        'fileExt': '*.jpg;*.gif;*.png',
        'fileDesc': 'Image Files',
        'auto': true,
        'multi': true
    });
    </script>

此处的js都按照正常配置即可,注意路径要写准确了,需要注意的事‘script’:‘<%=temp%>’这里,这里是指定处理上传的文件路径的,一般为upload.ashx/upload.aspx等等。

这里这样写是要在后台给动态生成个带唯一参数的路径。

后台部分代码:

page_load

    public string temp = "upload.aspx?sn=0";
    DataSet ds = new DataSet();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            txt_CaseTime.Text = System.DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
            string sn = lbl_ID.Text = System.DateTime.Now.ToString("yyyyMMddhhmmss");

            temp = "upload.aspx?sn=" + sn;
        }
    }

此处代码是动态生成带唯一参数的路径,这个参数要在使用upload.aspx批量上传图片时用到。我图省事就直接获取系统时间生成个唯一参数。

完整信息(就是作品名称,作品信息都填完后的)提交事件: 

                            string s_Content = null;
                            ds = DbHelperOleDb.Query("select * from [temp] where temp_sn='"+ lbl_ID.Text + "'");
                            if (ds != null && ds.Tables.Count > 0)
                            {
                                if (ds.Tables[0].Rows.Count > 0)
                                {
                                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                                    {
                                        s_Content = ds.Tables[0].Rows[i][1].ToString() +"|"+ s_Content ;
                                    }
                                }
                            }

这块代码要结合2.upload.aspx代码解释,就是在upload.aspx页面把处理完图片批量上传,并把每一张图片作为一条记录加上统一的唯一的参数sn做为ID插入到临时temp表中之后。

本页面再按照page_load中生成的唯一参数sn去temp临时表中去读取该sn下的记录然后循环写成一个字段插入到work表中~

2.upload.aspx页面(与flash插件结合处理图片批量上传)

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Data.OleDb;
using System.IO;

public partial class m_admin_files_upload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string sn = Request.QueryString["sn"].ToString();
        if (sn.Length > 14)
            sn = sn.Substring(0,14);

        try
        {
            //获取上传的文件数据
            HttpPostedFile file = Request.Files["Filedata"];
            string fileName = file.FileName;
            string fileType = Path.GetExtension(fileName).ToLower();
            //由于不同浏览器取出的FileName不同(有的是文件绝对路径,有的是只有文件名),故要进行处理
            if (fileName.IndexOf(' ') > -1)    
            {
                fileName = fileName.Substring(fileName.LastIndexOf(' ') + 1);
            }
            else if (fileName.IndexOf('/') > -1)
            {
                fileName = fileName.Substring(fileName.LastIndexOf('/') + 1);
            }
            //上传的目录
            string uploadDir = "~/uploadfile/" + System.DateTime.Now.ToString("yyyyMM") + "/";
            //上传的路径
            if (Directory.Exists(Server.MapPath(uploadDir)) == false)
            {
                Directory.CreateDirectory(Server.MapPath(uploadDir));
            }

            if (Directory.Exists(Server.MapPath(uploadDir + System.DateTime.Now.ToString("dd") + "/")) == false)
            {
                Directory.CreateDirectory(Server.MapPath(uploadDir + System.DateTime.Now.ToString("dd") + "/"));
            }

            uploadDir = uploadDir + System.DateTime.Now.ToString("dd") + "/";

            string uploadPath = uploadDir + MD5.strToMD5(fileName).Substring(0,8) + fileType;

            //保存文件
            file.SaveAs(Server.MapPath(uploadPath));
            //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
            DbHelperOleDb.ExecuteSql("insert into [temp](temp_sn,temp_Content) values('" + sn + "','" + uploadPath + "')");
            //Response.Write("1");
        }
        catch
        {
            //Response.Write("0");
        }
    }
}

其实这个只是在官方DEMO的基础上增加了一点小功能,获取workadd.aspx中flash插件批量上传事件触发后传来的唯一参数sn,并且把每一张图片与sn都作为一条独立的记录存储到临时表temp中。 

 

大致代码如上,我写的比较乱,如果看不明白的可以留下联系方式我给你发代码。

思路就是在含有flash插件的页面的pageload事件生成唯一标识,并作为参数传给处理图片批量上传的页面upload,改页面主要是将每一张上传的页面加上这个唯一的参数作为一条记录存放到临时表中。然后再含有flash插件的页面的提交时间中再按照这个唯一的参数读temp表,获取的所有记录就是上传的图片路径了,到这步就按照正常的拼一个字符串作为work表中的work_Content就OK了