基于ASP.NET+easyUI框架实现图片上传功能（判断格式+即时浏览 ）

下面是关于“基于ASP.NET+easyUI框架实现图片上传功能（判断格式+即时浏览）”的完整攻略，包含两个示例说明。

简介

在ASP.NET应用程序中，可以使用easyUI框架实现图片上传功能。本文将详细讲解如何使用ASP.NET和easyUI框架实现图片上传功能，并在上传过程中判断图片格式和实现即时浏览。

步骤

以下是使用ASP.NET和easyUI框架实现图片上传功能的步骤：

1. 引入easyUI框架：

在ASP.NET应用程序中，可以使用以下代码引入easyUI框架：

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

在上面的代码中，我们引入了easyUI框架的CSS和JavaScript文件。

1. 添加HTML代码：

在ASP.NET应用程序中，可以使用以下HTML代码添加图片上传控件：

<input id="file_upload" name="file_upload" type="file">
<div id="preview"></div>

在上面的代码中，我们使用input元素添加了一个文件上传控件，并使用div元素添加了一个用于预览图片的容器。

1. 添加JavaScript代码：

在ASP.NET应用程序中，可以使用以下JavaScript代码实现图片上传功能：

$(function(){
    $('#file_upload').uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'buttonText' : '选择文件',
        'fileTypeExts' : '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file, data, response) {
            $('#preview').html('<img src="' + data + '">');
        }
    });
});

在上面的代码中，我们使用uploadify插件实现了图片上传功能。我们指定了上传控件的swf和uploader属性，分别指定了上传控件的Flash文件和上传处理程序的URL。我们使用buttonText属性指定了上传控件的按钮文本。我们使用fileTypeExts属性指定了允许上传的图片格式。我们使用onUploadSuccess事件处理程序在上传成功后显示上传的图片。

示例说明

以下是两个示例说明，演示如何使用ASP.NET和easyUI框架实现图片上传功能：

示例1：上传图片并显示预览

在ASP.NET应用程序中，可以使用以下代码实现上传图片并显示预览：

$(function(){
    $('#file_upload').uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'buttonText' : '选择文件',
        'fileTypeExts' : '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file, data, response) {
            $('#preview').html('<img src="' + data + '">');
        }
    });
});

在上面的代码中，我们使用uploadify插件实现了图片上传功能。我们指定了上传控件的swf和uploader属性，分别指定了上传控件的Flash文件和上传处理程序的URL。我们使用buttonText属性指定了上传控件的按钮文本。我们使用fileTypeExts属性指定了允许上传的图片格式。我们使用onUploadSuccess事件处理程序在上传成功后显示上传的图片。

示例2：限制上传图片的大小

在ASP.NET应用程序中，可以使用以下代码限制上传图片的大小：

$(function(){
    $('#file_upload').uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'buttonText' : '选择文件',
        'fileTypeExts' : '*.gif; *.jpg; *.png',
        'fileSizeLimit' : '2MB',
        'onUploadSuccess' : function(file, data, response) {
            $('#preview').html('<img src="' + data + '">');
        },
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            alert('文件 "' + file.name + '" 上传失败: ' + errorString);
        }
    });
});

在上面的代码中，我们使用fileSizeLimit属性限制上传图片的大小为2MB。我们使用onUploadError事件处理程序在上传失败时显示错误信息。