上传(浏览)Uploadfy插件的使用

最新推荐文章于 2020-04-07 16:13:01 发布

无盐海

最新推荐文章于 2020-04-07 16:13:01 发布

阅读量900

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/Fanbin168/article/details/44036021

版权

EasyUI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<1>

Uploadify v3.2.1 参数说明

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
    <link href="~/third-party/easyui/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/third-party/uploadify-v3.2.1/uploadify.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/third-party/uploadify-v3.2.1/jquery.uploadify.min.js"></script>
</head>
<body>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="panel" style="display: block; width: 450px;">
            <div class="panel-header">
                <div class="panel-title">新增</div>
            </div>
            <div class="easyui-panel panel-body">
                <table>
                    <tr>
                        <td>页面分类:</td>
                        <td>
                            <select id="CLASSIFICATION" name="CLASSIFICATION" disabled>
                                <option value="1">首页</option>
                                <option value="2">帮助中心</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>图片:</td>
                        <td style="width:300px;padding-top:10px;">
                            <input type="text" id="PIC_NAME" name="PIC_NAME" style="display:none;" />
                            <span id="uploadify"></span>
                            <div>
                                <img id="ImgResult" style="max-width: 300px; max-height: 150px; display:none;" />
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none;">
                        <td>图片链接(相对路径):</td>
                        <td><input type="text" id="IMG_URL" name="IMG_URL" /></td>
                    </tr>
                    <tr>
                        <td>链接地址(绝对路径):</td>
                        <td><input type="url" id="LINK_URL" name="LINK_URL" /></td>
                    </tr>
                    <tr>
                        <td><input type="submit" value="新增" class="btn btn-default" /></td>
                        <td><a href="/Ms_Pic_Banner/Index">返回列表</a></td>
                    </tr>
                </table>
            </div>
        </div>
    }
</body>
</html>

<script type="text/javascript">
    $(function () {
        $('#uploadify').uploadify({
            uploader: '/Ms_Pic_Banner/PicUpload',// 服务器端处理地址
            swf: '/third-party/uploadify-v3.2.1/uploadify.swf',
            width: 60,
            height: 23,
            buttonText: "浏  览",
            buttonClass: "uploadify-button-new",
            fileTypeExts: "*.jpg;*.jpeg;*.png",
            fileTypeDesc: "请选择 jpg jpeg png 文件",
            fileSizeLimit: "4MB", //设置可以上传文件的最大大小
            multi: false,
            onUploadStart: function (file) {
		//settings是设置的意思。这段代码的意思就是：设置formData的值为{@foreach (string k in Request.Cookies.AllKeys)
                //{ @:'cookie_@(k)': '@Request.Cookies[k].Value', });}的一个键值对集合
                $("#uploadify").uploadify("settings", "formData", {@foreach (string k in Request.Cookies.AllKeys)
                {
                    @:'cookie_@(k)': '@Request.Cookies[k].Value',
                                            }'': ''
                });
            },
            onSelectError: function (file, errorCode, errorMsg) {
                switch (errorCode) {
                    case -110:
                        //$('#uploadify').uploadify('settings', 'fileSizeLimit')的意思是获取fileSizeLimit这个属性的值【$('#uploadify').uploadify()的参数问题：当只有两个参数的情况下，表示获取值。如果有三个参数，表示设置值。参考上面的设置值的方法】
                        alert("文件 [" + file.name + "] 大小超出系统限制的" + jQuery('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小！");
                        break;
                }
            },
            onUploadSuccess: function (file, data, response) {
                if (data != "") {
                    $("#ImgResult").show().attr("src", "/upload/banner/" + data);
                    $("#PIC_NAME").val(file.name);
                    $("#IMG_URL").val(data);
                }
            }
        });
    });
</script>

Ms_Pic_Banner控制器

/// <summary>
        /// 图片上传处理
        /// </summary>
        /// <param name="Filedata"></param>
        /// <returns></returns>
        [UserAuthorizeAttribute(ActionType = (int)UserPermissionEnum.Create, ControllerName = "Ms_Pic_Banner")]//权限处理
        public string PicUpload(HttpPostedFileBase Filedata)
        {
            try
            {
                // 如果没有上传文件
                if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0)
                    return "";
                //判断是否为图片
                if (!PictureOperate.isImg(Filedata.FileName))
                    return "";
                //保存原图
                string filename = System.IO.Path.GetFileName(Filedata.FileName);
                string filepath = this.Server.MapPath(string.Format("~/upload/banner/{0}", filename));
                Filedata.SaveAs(filepath);
                //处理原图,并保存处理后的图片
                string tempFileName = "zc_" + DateTime.Now.ToFileTime() + Filedata.FileName.Substring(Filedata.FileName.Split('.')[0].Length);//重命名图片名称
                string tempFilePath = this.Server.MapPath(string.Format("~/upload/banner/{0}", tempFileName));
                PictureOperate.CutForCustom(Filedata.InputStream, tempFilePath, 1920, 300, 0);//对图片进行裁剪处理：定长宽裁剪按模版比例最大范围的裁剪图片并缩放至模版尺寸
                //删除原图
                FileInfo fi = new FileInfo(filepath);
                fi.Delete();
                //返回处理后的图片名称
                return tempFileName;
            }
            catch
            {
                return "";
            }
        }

HttpPostedFileBase 类:

充当类的基类，这些类提供对客户端已上载的单独文件的访问。

属性

	名称	说明
	ContentLength	在派生类中重写时，获取上载文件的大小（以字节为单位）。
	ContentType	在派生类中重写时，获取上载文件的 MIME 内容类型。
	FileName	在派生类中重写时，获取客户端上文件的完全限定名。
	InputStream	在派生类中重写时，获取一个 Stream 对象，该对象指向一个上载文件，以准备读取该文件的内容。

页首

方法

	名称	说明
	Equals(Object)	确定指定的对象是否等于当前对象。（继承自 Object。）
	Finalize	允许对象在“垃圾回收”回收之前尝试释放资源并执行其他清理操作。（继承自Object。）
	GetHashCode	作为默认哈希函数。（继承自 Object。）
	GetType	获取当前实例的 Type。（继承自Object。）
	MemberwiseClone	创建当前 Object 的浅表副本。（继承自Object。）
	SaveAs	在派生类中重写时，保存上载文件的内容。
	ToString	返回表示当前对象的字符串。（继承自 Object。）

页首

备注

HttpPostedFileBase类为抽象类，该类包含的成员与 HttpPostedFile 类相同。使用 HttpPostedFileBase 类可以创建一些派生类，这些派生类与HttpPostedFile 类相似，但是可以进行自定义并在 ASP.NET 管道外部使用。在执行单元测试时，通常使用派生类实现具有自定义行为的成员以实现正在测试的方案。

HttpPostedFileWrapper类是从 HttpPostedFileBase 类派生的。HttpPostedFileWrapper类用作 HttpPostedFile 类的包装。在运行时，通常使用 HttpPostedFileWrapper 类的实例调用HttpPostedFile 对象的成员。

==============================================================================================

自己用一般处理程序进行测试

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="uploadify/jquery.uploadify.js"></script>
    <link href="uploadify/uploadify.css" rel="stylesheet" />
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script type="text/javascript">
    $("#box").uploadify({
        swf: "../uploadify/uploadify.swf",
        uploader: "../Handler1.ashx",

        buttonText: "浏览",
        fileSizeLimit: 800,
        fileTypeExts: "*.doc; *.pdf; *.rar",
        preventCaching: true,
        progressData: "speed",
        removeCompleted: true,
        checkExisting: true,

        onUploadStart: function (file) {
            
            alert("准备上传的时候触发")
          
        },
        onSelectError: function (file, errorCode, errorMsg) {
            if (file.fileSizeLimit > 800);
            {
                alert("文件超过了规定的大小");
                return;
            }
        }
    });
</script>

一般处理程序（服务端）Handler1.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace easy_ui
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";

            HttpPostedFile fileData = context.Request.Files[0];

            string result = uploadify(fileData);
            if (result == "")
            {
                context.Response.Write("请选择要上传的文件");
            }
            if(result=="上传文件类型错误")
            {
                context.Response.Write("请选择.doc，.pdf, .rar格式的文件");
            }
            context.Response.Write("上传成功");


        }

        public string uploadify(HttpPostedFile fileData)
        {
            if (fileData == null || string.IsNullOrWhiteSpace(fileData.FileName) || fileData.ContentLength <= 0)
            {
                return "";
            }
            else
            {
                string fileName = System.IO.Path.GetFileName(fileData.FileName);//获取上传的文件名

                //获取文件扩展名（带个点）|| ext != ".pdf" || ext != ".rar"
                string ext = System.IO.Path.GetExtension(fileData.FileName);
                if (ext != ".doc")
                {
                    return "上传文件类型错误";
                }

                // 指定文件稍后要保存的地址
                string filePath = HttpContext.Current.Server.MapPath(string.Format("~/File/{0}", fileName));

                //保存上传文件的内容。
                fileData.SaveAs(filePath);

                return fileName;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}