asp.net批量上传图片代码
2013-03-20 21:50
483 查看
因为工作需求需要，所以闲来无聊随手写了一个多图片上传。不多说直接上源码！！
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="uploadScrollImg.aspx.cs"
Inherits="HighWeb.uploadScrollImg" %>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片批量上传</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
width: 100%;
}
#upload_filelist {
width: 600px;
list-style-type:decimal-leading-zero;
}
#upload_filelist li {
clear:both;
margin:0;
padding:0;
width:100%;
}
.img_upload_view {
float: right;
width: 300px;
height:260px;
border:1px dashed red;
display:none;
}
.img_upload_view dt,.img_upload_view dd{
margin:0;
padding:0;
width:100%;
border:1px solid #CCCCCC;
}
#resut_msg{
color:Green;
}
-->
</style>
</head>
<body>
<fieldset>
<legend>图片上传</legend>
<form action="uploadScrollImg.aspx" method="post" enctype="multipart/form-data">
<ol id="upload_filelist">
<li>
<input type="file" name="file_upload_01" value="请选择一张图片" /><dl id="img_view_01" class="img_upload_view">
<dt>
<img id="img_upload_01" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_01" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_02" value="请选择一张图片" /><dl id="img_view_02" class="img_upload_view">
<dt>
<img id="img_upload_02" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_02" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_03" value="请选择一张图片" /><dl id="img_view_03" class="img_upload_view">
<dt>
<img id="img_upload_03" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_03" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_04" value="请选择一张图片" /><dl id="img_view_04" class="img_upload_view">
<dt>
<img id="img_upload_04" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_04" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_05" value="请选择一张图片" /><dl id="img_view_05" class="img_upload_view">
<dt>
<img id="img_upload_05" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_05" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_06" value="请选择一张图片" /><dl id="img_view_06" class="img_upload_view">
<dt>
<img id="img_upload_06" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_06" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_07" value="请选择一张图片" /><dl id="img_view_07" class="img_upload_view">
<dt>
<img id="img_upload_07" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_07" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_08" value="请选择一张图片" /><dl id="img_view_08" class="img_upload_view">
<dt>
<img id="img_upload_08" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_08" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_09" value="请选择一张图片" /><dl id="img_view_09" class="img_upload_view">
<dt>
<img id="img_upload_09" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_09" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li>
<input type="file" name="file_upload_10" value="请选择一张图片" /><dl id="img_view_10" class="img_upload_view">
<dt>
<img id="img_upload_10" src="" width="160" height="160" alt="图片加载中...." /></dt>
<dd>
<input id="input_upoad_10" value="请输入图片的描述" />
</dd>
</dl>
</li>
<li style="list-style-type: none">
<input type="submit" value="开始上传" /><input type="reset" value="全部取消" /><span id="resut_msg"><%=UploadMsg%></span></li>
</ol>
<input type="hidden" value="<%=loadSucces %>" />
</form>
</fieldset>
<script type="text/javascript">
<!--
var loadSucess = <%=loadSucces %>;
window.onload=function(){
if (loadSucess) {
for(var f in loadSucess){
if(loadSucess[f]!=undefined)
{
var num= loadSucess[f].fn.replace ("file_upload_","");
document.getElementById("img_view_"+num).style.display="block";
document.getElementById("img_view_"+num).style.width="300px";
document.getElementById("img_view_"+num).style.height="260px";
document.getElementById("img_upload_"+num).setAttribute("src",loadSucess[f].ph);
}
}
}
}
-->
</script>
</body>
</html>using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace HighWeb
{
public partial class uploadScrollImg : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
UploadMsg = "图片上传组件已经就绪";
loadSucces = "[]";
if (!IsPostBack)
{
if (Request.Files.Count > 0)
{
UploadMsg = "图片";
loadSucces = "[";
bool f = false;
foreach (string k in Request.Files.AllKeys)
{
if (!string.IsNullOrEmpty(Request.Files[k].FileName))
{
string fileName = string.Format("{0}{1}", Guid.NewGuid().ToString().Replace("-", ""), Path.GetExtension(Request.Files[k].FileName));
Request.Files[k].SaveAs(string.Format("{0}{1}", Server.MapPath("~/uploadResurce/"), fileName));
if (f)
{
loadSucces += ",";
UploadMsg += ",";
}
loadSucces += "{fn:'" + k + "',ph:'/uploadResurce/" + fileName + "'}";
UploadMsg += Request.Files[k].FileName;
f = true;
}
}
loadSucces += "]";
UploadMsg += "已经上传成功 ！";
}
}
}
protected string loadSucces
{
private set;
get;
}
protected string UploadMsg
{
private set;
get;
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- (转载)ASP.net（C#）批量上传图片代码
- 在线编辑器Kindedior在ASP.NET下实现图片批量上传
- ASP.NET中常用功能代码总结（上传图片到数据库，从数据库中读取图片）
- asp.net批量上传图片的实例
- [网络收集]Asp.net上传图片同时生成缩略图和水印图后台代码
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
- 使用ASP.net（C#）批量上传图片并自动生成缩略图,文字水印图,图片水印图
- asp.net+swfupload 多图片批量上传(附源码下载)
- ASP.NET上传图片代码
- Asp.Net上传图片验证代码的小例子
- KindEditor图片上传的Asp.net代码实例
- ASP.NET中常用功能代码总结——上传图片到数据库
- ASP.net 通用上传图片代码
- ASP.NET(C#)实现一次性动态上传多张图片的代码（多个文件）
- 在ASP.NET中上传图片并生成缩略图的C#代码
- KindEditor图片上传Asp.net代码
- ASP.NET下上传图片到数据库，并且读出图片的代码(详细版)
- Asp.Net上传图片验证代码的小例子
- ASP.NET中常用功能代码总结（上传图片到数据库，从数据库中读取图片）
- asp.net上传图片并作处理水印与缩略图的实例代码