: 使用uploadiify实现图片上传功能

使用Uploadify插件上传图片

最新推荐文章于 2017-02-17 10:29:14 发布

叶子的翅膀

最新推荐文章于 2017-02-17 10:29:14 发布

阅读量511

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiaoxiqinqinbaobao/article/details/8093266

技术归档专栏收录该内容

153 篇文章

订阅专栏

本文介绍如何利用Uploadify插件实现图片上传功能。通过引入必要的JS文件和配置上传设置，可以轻松实现图片的上传操作。但需要注意的是，在Firefox浏览器中可能会遇到显示问题。

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

引入 jquery.uploadify.min.js插件和uploadify文件夹。可在官方文档中下载
建一个upload.aspx

Html代码 

<%@ 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; }  

            hrefhref = 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

C#代码 

<%@ 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;  

        }  

    }  

}