前台aspx

//图片预览和描述
function previewImage(file) {
var div = document.getElementById('preview');
div.innerHTML = "";
for (var i = 0; i < file.files.length; i++) {
//alert(file.files[i]);
var ndiv = document.createElement("div");
ndiv.style.height = "150px";
ndiv.style.width = "300px";
ndiv.style.cssFloat = "left";
var img = document.createElement("img");
var textArea = document.createElement("textarea");
textArea.style.width = "100";
textArea.style.height = "60px";
textArea.setAttribute("name", "note"+i);//给填写备注的控件一个名字,和图片数量关联
ndiv.appendChild(img);
ndiv.appendChild(textArea);
img.id = "img" + i;
div.appendChild(ndiv);
img.width = 200;
img.height = 200;

}
for (var i = 0; i < file.files.length; i++) {
var pic = document.getElementById("img" + i);
pic.src = window.URL.createObjectURL(file.files[i]);

}

}

<form id="form1" method="post" runat="server" enctype="multipart/form-data">
<div style="text-align: center">
<div>
<h3>车辆图片上传</h3>
<input type="file" multiple="multiple" onchange="previewImage(this)" id="myimage" runat="server" class="btn btn-default" style="margin-left: 40%; height: 69px; width: 280px" />
<p id="MyFile">
<asp:Button runat="server" Text="确认返回" OnClick="Unnamed_Click" CssClass="btn btn-default" Height="68px" Width="124px" />
&nbsp;&nbsp;
<asp:Button runat="server" Text="开始上传" ID="UploadButton" OnClick="UploadButton_Click" CssClass="btn btn-default" Height="69px" Width="129px"></asp:Button>
</p>
<p>
<asp:Label ID="strStatus" runat="server" Font-Names="宋体" Font-Bold="True" Font-Size="9pt" Width="500px"
BorderStyle="None" BorderColor="White"></asp:Label>
</p>
</div>

<%-- 图片预览 --%>
<div id="preview">
</div>
</div>
</form>

后台cs

private void SaveImages()
{

///遍历File表单元素
HttpFileCollection files = HttpContext.Current.Request.Files;

/// 状态信息
System.Text.StringBuilder strMsg = new System.Text.StringBuilder();
strMsg.Append("上传的文件分别是:<hr color=red>");
try
{
for (int iFile = 0; iFile < files.Count; iFile++)
{
string note= Request["note"+iFile];//获取每张图片的描述内容
string fileName = files[iFile].FileName;
string path = Server.MapPath("~/upload/");
string imgType = files[iFile].ContentType.ToString(); // 图片类型

if (fileName != "" && (imgType.Equals("image/bmp") || imgType.Equals("image/jpg") || imgType.Equals("image/jpeg") || imgType.Equals("image/gif") || imgType.Equals("image/png")))
{

string upPath = FileController.GetUpPath();
fileName = iFile + "_" + fileName;
string path2 = Server.MapPath("~/upload/");
//生成原图
Byte[] oFileByte = new byte[files[iFile].ContentLength];
System.IO.Stream oStream = files[iFile].InputStream;
System.Drawing.Image oImage = System.Drawing.Image.FromStream(oStream);

int oWidth = oImage.Width; //原图宽度
int oHeight = oImage.Height; //原图高度

int tWidth = 100; //设置缩略图初始宽度
int tHeight = 100; //设置缩略图初始高度

int add1 = 20;
int add2 = 120;

Graphics g = null;
Bitmap tImage = null;

string fileExtension = System.IO.Path.GetExtension(fileName);
strMsg.Append("上传的文件类型:" + files[iFile].ContentType.ToString() + "<br>");
strMsg.Append("客户端文件地址:" + files[iFile].FileName + "<br>");
strMsg.Append("上传文件的文件名:" + fileName + "<br>");
strMsg.Append("上传文件的扩展名:" + fileExtension + "<br><hr>");
for (int i = 0; i < 4; i++)
{
//按比例计算出缩略图的宽度和高度
if (oWidth >= oHeight)
{
tHeight = (int)Math.Floor(Convert.ToDouble(oHeight) * (Convert.ToDouble(tWidth) / Convert.ToDouble(oWidth)));
}
else
{
tWidth = (int)Math.Floor(Convert.ToDouble(oWidth) * (Convert.ToDouble(tHeight) / Convert.ToDouble(oHeight)));
}
//生成缩略原图
tImage = new Bitmap(tWidth, tHeight);
g = Graphics.FromImage(tImage);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; //设置高质量插值法
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;//设置高质量,低速度呈现平滑程度
g.Clear(Color.Transparent); //清空画布并以透明背景色填充
g.DrawImage(oImage, new Rectangle(0, 0, tWidth, tHeight), new Rectangle(0, 0, oWidth, oHeight), GraphicsUnit.Pixel);
string savePath2 = path + files[iFile].FileName;
string savePath = "~/upload/" + "(" + tWidth + "-" + tHeight + ")" + fileName;
try
{
//以JPG格式保存图片
//oImage.Save(oFullName, System.Drawing.Imaging.ImageFormat.Jpeg);
tImage.Save(path2 + "(" + tWidth +"-"+ tHeight + ")" + fileName, System.Drawing.Imaging.ImageFormat.Jpeg);
//保存图片路径到数据库
inv_worklistInfo inv_wlInfo = new inv_worklistInfo();
inv_wlInfo.picurl = savePath;
inv_wlInfo.workid = workid;
inv_wlInfo.notes = note;
inv_worklistFactory.Create().Add(inv_wlInfo);
}
catch (Exception ex)
{
strStatus.Text = ex.Message;
}
if (i == 0)
{
tWidth = 100 + add1; //设置缩略图初始宽度
tHeight = 100 + add1; //设置缩略图初始高度
}
if (i == 1)
{
tWidth = 100 + add2; //设置缩略图初始宽度
tHeight = 100 + add2; //设置缩略图初始高度
}
if (i == 2)
{
tWidth = oWidth; //设置缩略图初始宽度
tHeight = oHeight; //设置缩略图初始高度
}
}
////释放资源
if (!CmpUtil.IsNullOEmp(oImage))
{
oImage.Dispose();
}
if (!CmpUtil.IsNullOEmp(g))
{
g.Dispose();
}
if (!CmpUtil.IsNullOEmp(tImage))
{
tImage.Dispose();
}
}
else
{
JSController.Alert(this, "图片格式只支持:jpeg,jpg,png,bmp,gif");
}
}
strStatus.Text = strMsg.ToString();
}
catch (System.Exception Ex)
{
strStatus.Text = Ex.Message;
}
}

}

asp.net多图片上传同时保存对每张图片的描述的更多相关文章

  1. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  2. 配置django图片上传与保存展示

    近来在研究django,发现有好多好玩的功能,比如图片上传,以前处理这个比较麻烦,现在我们来看看如何来处理图片上传与保存 1.在数据库设计的时候需要配置upload_to image = models ...

  3. java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  4. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  5. thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成

    目录 1.案例 1.1图片上传  1.2进行图片木马检测   1.3缩略图生成   1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...

  6. layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台

    const pathLib = require('path');//引入node.js下的一个path模块的方法,主要处理文件的名字等工作,具体可看文档 const fs = require(''fs ...

  7. 前台图片上传展示JS(单张图片展示)

    <script type="text/javascript">    //下面用于多图片上传预览功能    function setImagePreviews(aval ...

  8. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  9. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

随机推荐

  1. tcpdump 抓包让wireshark来分析

    在linux下面用tcpdump 抓包非常方便, 但是抓的包要提取出来进行分析, 还是得用wireshark来过滤分析比较方便. 下面先介绍一下 TCPDUMP 的使用 例:tcpdump host ...

  2. [Leetcode][Python]49: Anagrams

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 49: Anagramshttps://leetcode.com/proble ...

  3. linux之SQL语句简明教程---CREATE VIEW

    视观表 (View) 可以被当作是虚拟表格.它跟表格的不同是,表格中有实际储存资料,而视观表是建立在表格之上的一个架构,它本身并不实际储存资料. 建立一个视观表的语法如下: CREATE VIEW & ...

  4. hdu 5606 tree(并查集)

    Problem Description There is a tree(the tree is a connected graph which contains n points and n−1 ed ...

  5. get方式中文乱码问题

    <a target="_blank" href="ftpFileAction!downloadFile.action?filename=测试.xml"&g ...

  6. JQuery弹出窗口小插件ColorBox

    本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...

  7. (八)Android广播接收器BroadcastReceiver

    一.使用Broadcast Reciver 1.右击java文件夹,new->other->Broadcast Receiver后会在AndroidManifest.xml文件中生成一个r ...

  8. 使用CRT定位内存泄漏

    1. 使能内存泄漏检测#define _CRTDBG_MAP_ALLOC#include <stdlib.h>#include <crtdbg.h>注1:语句顺序不能修改:注2 ...

  9. 解决Firefox下input button内文字垂直居中

    众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写 ...

  10. listView 单选实现

    上一篇知道可以使用android自带的listview的chiocemode的单选模式实现.但那个布局是系统自带的checkedTextView,有时候我们需要自己实现布局,那么下面我们开始实现   ...