ASP.NET实现仿百姓网发布信息时多图片上传功能

发布时间：2014年7月2日 / 分类：ASP.NET / 14,107 次浏览 / 评论

前几天把几年前的一个多图片上传的程序改了改，实现了php环境下的应用，今天又实现了一个asp.net版本的依托swfupload的仿百姓网发布信息多图片上传功能，实现方式和asp、php版本的一样，只是把配置项转移到了web.config中。

asp.net版本的图片上传界面：

再看一下web.config文件：

<?xml version="1.0"?>
<configuration>
  <appSettings>
    <!--网站域名，最后不要加斜杠-->
    <add key="domain" value="http://localhost:51887"/>
    <!--上传插件的位置，请使用网站绝对路径-->
    <add key="basepath" value="/swfupload/"/>
    <!--上传文件的位置，请使用网站绝对路径-->
    <add key="uploadpath" value="/file/"/>
    <!--前台点击删除按钮时，是否删除服务器文件-->
    <add key="serverdelete" value="true"/>
    <!--单个上传文件大小限制，单位：MB-->
    <add key="sizeLimit" value="2MB"/>
    <!--最大允许上传文件数-->
    <add key="allowNumber" value="8"/>
    <!--允许上传文件类型-->
    <add key="allowType" value="*.gif;*.jpg;*.png"/>
  </appSettings>
  <system.webServer>
    <defaultDocument>
      <files>
        <add value="index.asp"/>
      </files>
    </defaultDocument>
  </system.webServer>
  <system.web>
    <compilation debug="true"/>
  </system.web>
</configuration>

上传页面源代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<!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" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,td,th {
	font-size: 14px;
}
td,th{
padding:8px;
}
.editform{
margin:10px auto;
width:960px;
border:1px solid #cccccc;
padding:10px;
}
.smalltext{font-size:12px}
.redtext{color:red}
-->
</style><head>
<title>免费发布信息</title>

<link href="<%=basepath%>css/swfupload.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basepath%>swfupload.js"></script>
<script type="text/javascript" src="<%=basepath%>swfupload.queue.js"></script>
<script type="text/javascript" src="<%=basepath%>fileprogress.js"></script>
<script type="text/javascript" src="<%=basepath%>handlers.js"></script>
<script type="text/javascript">
    var swfu;

    window.onload = function() {
        var settings = {
            flash_url : "<%=basepath%>swfupload.swf",
			    upload_url: "<%=domain%><%=basepath%>inc/asp.net/upload.ashx",
			    post_params: {"PHPSESSID" : "<%=sessionId%>"},
			    file_size_limit : "<%=sizeLimit%>", // 单个上传文件大小限制
			    file_types : "<%=allowType%>", // 允许上传的文件类型
			    file_types_description : "选择图片",
			    file_upload_limit : <%=allowNumber%>,
				file_queue_limit : <%=allowNumber%>,
			    custom_settings : {
			        progressTarget : "fsUploadProgress",
			        deleteImageUrl : "<%=basepath%>images/delete.gif",
					basePath:"<%=basepath%>",
			        delete_url:"<%=basepath%>inc/asp.net/delete.ashx", // 删除图片时调用的后台程序
				    upload_files_save_elementid:"hidUploadFiles", // 上传图片的路径保存在页面中的元素
				    upload_thubfiles_save_elementid:"hidUploadFilesThub" // 上传缩略图的路径保存在页面中的元素，非必需
				},
			    debug: false,

			    // 触发上传的按钮设置
			    button_image_url: "<%=basepath%>images/filebotton.png",
				button_width: "102",
				button_height: "29",
				button_placeholder_id: "spanButtonPlaceHolder",
				button_text: '',
				button_text_style: ".theFont { font-size: 16; }",
				button_text_left_padding: 12,
				button_text_top_padding: 3,
				
			    // 具体事件的处理请看文件：handlers.js
				file_queued_handler : fileQueued,
				file_queue_error_handler : fileQueueError,
				file_dialog_complete_handler : fileDialogComplete,
				upload_start_handler : uploadStart,
				upload_progress_handler : uploadProgress,
				upload_error_handler : uploadError,
				upload_success_handler : uploadSuccess,
				upload_complete_handler : uploadComplete,
				queue_complete_handler : queueComplete
			};

		    swfu = new SWFUpload(settings);
		};
		
	</script>
</head>
<body>
<div class="editform">
	<form id="form1" action="result.aspx" method="post" enctype="application/x-www-form-urlencoded">
	<h2>免费发布信息</h2>
	<div style="width:90%;height:1px; background-color:#cccccc;margin-bottom:20px;"></div>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right" valign="top">信息标题：</td>
    <td> <input name="txtTitle" type="text" id="txtTitle" size="40" /></td>
    </tr>
  <tr>
    <td align="right" valign="top">联系方式：</td>
    <td><input name="txtContact" type="text" id="txtContact" size="30" /></td>
    </tr>
  <tr>
    <td align="right" valign="top">一句话描述：</td>
    <td><input name="txtBriefIntroduction" type="text" id="txtBriefIntroduction" value="" size="50" /></td>
    </tr>
  <tr>
    <td align="right" valign="top">补充说明：</td>
    <td><textarea name="txtIntroduction" cols="50" rows="4" id="txtIntroduction"></textarea></td>
    </tr>
  <tr>
    <td align="right" valign="top">上传照片：</td>
    <td><!-- 上传区域开始 此处修改需谨慎 -->
			<div id="fsUploadProgress"></div>
			<div id="fsButtonArea" style="clear:both" class="smalltext">
				<span id="spanButtonPlaceHolder"></span>&nbsp;&nbsp;<span class="upload_tip_right">可一次选择多张照片上传!</span>
				<input name="hidUploadFiles" id="hidUploadFiles" type="hidden" value="" />
				<input name="hidUploadFilesThub" id="hidUploadFilesThub" type="hidden" value="" />
			</div>
			<div class="redtext smalltext">最多可上传<%=allowNumber%>张照片，每张照片不超过<%=sizeLimit%></div>
		<!-- 上传区域结束 --></td>
    </tr>
  <tr>
    <td align="right" valign="top">&nbsp;</td>
    <td>
      <input type="submit" name="Submit" value="免费发布信息" />
    </td>
  </tr>
</table>
</form>
</div>
</body>
</html>

其实asp、php、asp.net三个版本只有服务端的处理文件不同，相关js的处理完全相同，只需要实现上传图片、生成缩略图、删除文件三个服务器程序的功能即可，有兴趣的可以改造成自己的版本，修改upload_url和delete_url两个配置即可。

如果你想马上拥有此程序，点击这里猛烈下载（含ASP和PHP的示例）。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马，原文地址《ASP.NET实现仿百姓网发布信息时多图片上传功能》

关键字: swfupload 百姓网缩略图