`

使用uploadiify实现图片上传功能

阅读更多
使用uploadify插件实现图片上传功能。这是一种flash上传的形式。缺点是在ff不能正常的显示。有说与session的问题,没解决成功。

引入 jquery.uploadify.min.js插件和uploadify文件夹。可在官方文档中下载
建一个upload.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upload.aspx.cs" Inherits="text" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>上传</title>
    <link type="text/css" rel="Stylesheet" href="Css/uploadify.css" />
    <script src="Js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Js/Admin/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var href = location.href;
            //alert(href);
            if (href.indexOf('?') < 0) { alert("错误"); return; }
            href = href.substring(href.indexOf('?') + 1, href.length);
            var foldername = href.substring(href.indexOf('=') + 1, href.length);
            var name=href.substring(0,href.indexOf('&'));
            //alert(href);
            $("#uploadify").uploadify({
                height: 30,
                swf: 'Images/AdministratorCenter/uploadify.swf',
                uploader: 'UploadHandler.ashx?id=' + href,
                width: 120,
                buttonClass:'upload_button'
                folder: 'WebImages',
                fileTypeDesc: 'Web Images',
                fileTypeExts: ' *.jpg;',
                onUploadSuccess: function(file, data, response) { window.opener.document.all.uploadfile.innerHTML = foldername+"/"+name + ".jpg"; window.close(); },
                onUploadError: function(file, errorCode, errorMsg, errorString) { alert(errorString); }
            });
        });  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="file" name="uploadify" id="uploadify" />
    </form>
</body>
</html>


再建一个UploadHandler.ashx
<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;
using System.Web;
using System.IO;

public class UploadHandler : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";

        HttpPostedFile file = context.Request.Files["Filedata"];
        string casetitle = context.Request["casetitle"];
        string uploadPath =
            HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\WebImages\\"+casetitle+"\\";
        string filenameSelt = context.Request["id"];
        if (file == null || filenameSelt == null)
        {
            return;
        }
        string filetype = file.FileName.Substring(file.FileName.IndexOf("."));//文件后缀
        if (file != null)
        {
            if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }
            file.SaveAs(uploadPath+ filenameSelt + filetype);
            
            //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
            context.Response.Write("1");
        }
        else
        {
            context.Response.Write("0");
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics