页面从服务器中浏览并添加图片显示 - 波澜不惊super - 博客园
&script src="~/Scripts/jquery-1.8.3.min.js"&&/script&
&script src="~/EasyUI/jquery.easyui.min.js"&&/script&
&link href="~/Theme/NewBlueVacation/Images/uploadify.css" rel="stylesheet" /&
&script src="~/Scripts/jquery.uploadify.min.js"&&/script&
&script src="~/Scripts/layer/layer.min.js"&&/script&
&link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /&
&link href="~/EasyUI/themes/icon.css" rel="stylesheet" /&
$(function(){
$('.travel-info').dialog({
title: "日程添加/修改",
closed: false,
cache: false,
modal: true,
width: 800,
height: 600,
href: '/GetData/SetDays?lineID=' + LineID + "&days=" + $('#TravelDays').val(),
...........
&li style="text-align:width:700"&&img src="/Theme/NewBlueVacation/Images/an_baocun_03.png" style="vertical-align:" /&&input type="button" class="supplier-save" value="" id="SaveTravelProduct" style="width:70margin-right:20color:" /&&input type="button" class="supplier-save copy" value="" id="SaveTravelProductCopy" style="width:70margin-right:20color:" /&
&a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn-add" style="display:height:25"&添加行程&/a&
&a href="#" id="btn-prview" style="display:" target="_blank"&预览&/a&&/li&
&div class="travel-info"&
前台页面代码
后台处理代码
using System.Collections.G
using System.L
using System.W
using System.Web.M
using Newtonsoft.J
using MODEL;
using System.IO;
using System.N
using System.T
namespace Web.Controllers
public class GetDataController : BaseController
public ActionResult SetDays(int LineID = 0, int days = 0)
ViewBag.LineID = LineID;
ViewBag.days =
return view();
GetDataController
SetDays.cshtml处理页面
BLL.IBLL DB = new BLL.IBLL();
DateTime nowDate = DateTime.N
//if (ViewBag.nowDate != "")
string NowDate = ViewBag.nowD
nowDate = DateTime.Parse(NowDate);
&script src="~/Scripts/layer/layer.min.js"&&/script&
&script src="~/EasyUI/jquery.easyui.min.js"&&/script&
&link href="~/Theme/NewBlueVacation/Images/CalendarSmall.css" rel="stylesheet" /&
&link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /&
&link href="~/EasyUI/themes/icon.css" rel="stylesheet" /&
var selectRow = null;
var formTotal = 0;
var LineID = $('#TravelProductId').val();
$(function () {
$('#tt').tabs({
tabPosition: 'left',
border:false
$(document).ready(function () {
$('#tt').tabs({
tabPosition: 'left',
border: false
//在弹出窗中弹出一个layer窗口，并浏览服务器的图片，最后把选好的图片添加到这个dialog弹出窗口，
$(".info-r
input[type='button']").click(function () {
var parentdiv = $(this).parent().parent().parent();
var scenery = parentdiv.children("input[name='Scenery']");
var picList = parentdiv.find('.pic-list');
border: [0],
title: "选择已上传图片",
shadeClose: true,
closeBtn: false,
scrolling: 'auto',
maxmin:true,
btn: ['确定'],
iframe: { src: '/GetData/ShowUploadImgs' },
area: ['800px', '600px'],
yes: function (index) {
var files = layer.getChildFrame('#filenames', index).val();
layer.close(index);
if (files != "" || files.length & 0) {
files = files.substring(0, files.length - 1);
var fil = files.split(',');
for (var i = 0; i & fil. i++) {
//layer.msg('您获得了子窗口标记：' + fil[i], 3, 1);
if (scenery.val().indexOf(fil[i]) == -1) {
picList.append('&img src="/Upload/TravelProduct/King/' + fil[i] + '"/&');
scenery.val(scenery.val() + '|/Upload/TravelProduct/King/' + fil[i]);
close: function (index) {
var files = layer.getChildFrame('#filenames', index).val();
if (files != "" || files.length & 0)
files = files.substring(0, files.length - 1);
var fil = files.split(',');
for (var i = 0; i & fil. i++)
if (scenery.val().indexOf(fil[i]) == -1) {
///Upload/TravelProduct/King/这个地址应该做到字符串里面以后可以查询多个文件夹的东西
picList.append('&img src="/Upload/TravelProduct/King/' + fil[i] + '"/&');
scenery.val(scenery.val() + '|/Upload/TravelProduct/King/' + fil[i]);
//行程图片上传
$(".info-r
input[type='file']").uploadify({
formData: {
folder: '\\Upload\\TravelProduct\\King'
//图片保存的路径，如果没有前面//，图片就会保存到后台处理的一个路径下面去，如有保存路径为D:\web\Upload\TravelProduct\King/图片名称；如没有路径为D:/web/ExtemdClass/Upload/TravelProduct/king/图片名称
swf: '/Theme/NewBlueVacation/images/uploadify.swf',
uploader: '/ExtendClass/UploadFiles.ashx',
width: 50,
height: 20,
buttonText: '
',//上传按钮文字
buttonImage: "/Theme/NewBlueVacation/images/btn.gif",//上传按钮路径
fileTypeExts: '*.*.*.*.bmp',
onUploadSuccess: function (file, data, response) {
var parentdiv = $(this.wrapper).parent().parent().parent();
var picList = parentdiv.find('.pic-list');
if (data == "0") {
$.messager.alert("提示", "上传失败!", 'error');
$.messager.alert("提示", "上传成功！", 'info');
picList.append('&img src="' + data + '"/&');
var scenery = parentdiv.children("input[name='Scenery']");
scenery.val(scenery.val() + '|' + data);
//签证的上传功能
$("#uploadfile").uploadify({
swf: '/Theme/NewBlueVacation/images/uploadify.swf',
uploader: '/ExtendClass/UploadFiles.ashx',
width: 47,
height: 20,
buttonText: '
',//上传按钮文字
buttonImage: "/Theme/NewBlueVacation/images/btn.gif",//上传按钮路径
fileTypeExts: '*.*.*.*.*.*.*.pdf',
onUploadSuccess: function (file, data, response) {
if (data == "0") {
$.messager.alert("提示", "上传失败!", 'error');
$('#file').append('&a href="' + data + '"
target="_blank"&' + file.name + '&/a&');
$('#filelist').val($('#filelist').val() + ',' + file.name + '|' + data);
$.post('/GetData/SaveDocument', { TravelProductId: LineID,VisaDocuments:$('#filelist').val() }, function (data) {
$.messager.alert("提示", data.msg, 'info');
}, 'json')
//签证开始
$('#visaTable').datagrid({
url: '/GetData/VisaList/' + LineID,
columns: [[
{ field: 'VisaId', title: 'VisaId', width: 100, checkbox: true },
{ field: 'TravelProductId', title: 'TravelProductId', width: 100, hidden: true },
{ field: 'VisaName', title: '签证名称', width: 200, halign: 'center', editor: { type: 'validatebox' } },
{ field: 'VisaRequire', title: '签证要求', width: 450, halign: 'center', editor: { type: 'validatebox' } },
//{ field: 'VisaDocuments', title: '签证文档', width: 100, halign: 'center', editor: { type: 'text' } },
field: 'IsTitle', title: '是否标题', width: 100, align: 'center', editor: { type: 'validatebox' }, formatter: function (value, row, index) {
if (row.IsTitle) {
return '是';
return '否';
toolbar: [{
text: '新增',
iconCls: 'icon-add',
handler: function () {
$('#visaTable').datagrid('appendRow', {});
selectRow = $('#visaTable').datagrid('getRows').length - 1;
$('#visaTable').datagrid('selectRow', selectRow);
$('#visaTable').datagrid('beginEdit', selectRow);
text: '编辑',
iconCls: 'icon-edit',
handler: function () {
var row = $('#visaTable').datagrid('getSelected')
if (row != null) {
selectRow = $('#visaTable').datagrid('getRowIndex', row);
$('#visaTable').datagrid('selectRow', selectRow);
$('#visaTable').datagrid('beginEdit', selectRow);
$.messager.alert('提示', '请选择你要修改的记录', 'info');
text: '保存',
iconCls: 'icon-save',
handler: function () {
$('#visaTable').datagrid('endEdit', selectRow);
text: '删除',
iconCls: 'icon-remove',
handler: function () {
var delrow = $('#visaTable').datagrid('getSelected');
if (delrow == null) {
$.messager.alert('提示', '你还没有选择要删除的记录', 'error');
$.post('/GetData/Delvisa', { id: delrow.VisaId }, function (data) {
$.messager.alert('提示', data.msg, 'info');
$('#visaTable').datagrid('load');
}, 'json');
text: '保存为模板',
iconCls: 'icon-save',
handler: function () {
var rows = $('#visaTable').datagrid('getRows');
if (rows == null) {
$.messager.alert('提示', '没有数据可保存为模板', '提示');
$.messager.prompt('提示信息', '请输入你要保存的模板名：', function (r) {
var IdList = "";
for (var i = 0; i & rows. i++) {
var row = rows[i];
if (IdList == "") {
IdList = row.VisaId;
IdList = IdList + "," + row.VisaId;
$.post('/GetData/SaveVisaTemplage', { idList: IdList, name: r }, function (data) {
$.messager.alert('提示', data.msg, 'info');
$('#t1').combobox('reload');
}, 'json');
onAfterEdit: function (rowIndex, rowData, changes) {
rowData.TravelProductId = LineID;
$.post('/GetData/SaveVisa/', rowData, function (data) {
$.messager.show({
title: '提示',
msg: data.msg,
timeout: 5000,
showType: 'slide'
$('#visaTable').datagrid('load');
}, 'json');
selectRow = null;
//签证结束
//保存行程
$('#saveDays').click(function () {
formTotal = $('#tt form').size();
$.post('/GetData/SaveLineItinerary', $('#tt form').first().serialize(), function (data) {
}, 'json');
//保存行程结束
//保存费用说明
$('#saveFee').click(function () {
$.post('/GetData/SaveTravelFees/', $('#feeform').serialize(), function (data) {
if (data.sucess) {
layer.msg(data.msg, 2, 9);
layer.msg(data.msg, 2, 8);
},'json');
//保存费用说明
//预定须知
$('#yuDing').click(function () {
$.post('/GetData/SaveBookings/', $('#knowForm').serialize(), function (data) {
if (data.sucess) {
layer.msg(data.msg, 2, 9);
layer.msg(data.msg, 2, 8);
},'json');
//预定须知结束
$('.calendar-title span').live('click', function () {
$('#GroupStage').dialog('refresh', '/GetData/GroupStageCalendar?nowDate=' + $(this).attr('data-value') + '&id=' + id);
$('.head li').each(function () {
$(this).width($(this).width() + 1);
$('.calendar ul').live('click', function () {
var price = $("input[name='AdultPrice']").val();
var planBit = $("input[name='PlanBit']").val();
var v = $(this).children('li').first().attr('data-value');
if ($(this).children('li').size() & 1) {
$(this).html($(this).children('li').first());
$('#date-list').val($('#date-list').val().replace("," + v, ''));
$('#date-list').val($('#date-list').val() + "," + v);
$(this).append('&li class="money"&￥' + price + '&/li&&li&' + planBit + '&/li&');
//添加团期
$('#addtuanqi').click(function () {
$.post('/GetData/SaveGroupStage', $('#group-form').serialize(), function (data) {
if (data.sucess) {
layer.msg(data.msg, 2, 9);
layer.msg(data.msg, 2, 8);
//$.messager.alert('提示', data.msg, 'info');
//if (data.sucess) {
$('#GroupStage').dialog('close');
}, 'json')
//行程提交的方法
function post(i) {
if (i & formTotal - 1) {
$.post('/GetData/SaveLineItinerary', $("#tt form").eq(i).serialize(), function (data) {
post(i + 1);
}, 'json');
$.post('/GetData/SaveLineItinerary', $("#tt form").eq(i).serialize(), function (data) {
// $.messager.alert("提示", data.msg, "info");
//$('.travel-info').dialog('close');
layer.msg(data.msg, 2, 9);
}, 'json');
&div class="easyui-tabs"&
&div title="行程描述"&
&div id="tt" class="easyui-tabs"&
int lineID = ViewBag.LineID;
@for (int i = 1; i &= ViewBag. i++)
MODEL.LineItinerary lModel = DB.I_LineItinerary.GetSingleModelBy(s =& s.TravelProductId == lineID && s.WhichDay == i);
if (lModel == null)
&div title="第 @i 天" style="padding:10height:460"&
&input type="hidden" name="ItineraryId" /&
&input type="hidden" name="WhichDay" value="@i" /&
&input type="hidden" name="Scenery" /&
&input type="hidden" name="TravelProductId" value="@lineID" /&
&div class="info-r"&
&div class="pic-list"&&/div&
&input type="file" id="uploadbtn@(i)" /&
&input type="button" value="服务器添加" id="addimp@(i)" /&
&ul class="info-l"&
&li class="clock"&&input name="StartEndTravel" /&&/li&
&li class="intro"&&textarea name="StrokeDescription"&&/textarea&&/li&
&li class="cup"&早餐：&input name="Breakfast" /&中餐：&input name="Lunch" /&晚餐：&input name="Supper" /&&/li&
&li class="house"&&input name="Stay" /&&/li&
&div title="第 @i 天" style="padding:10height:460"&
&input type="hidden" name="ItineraryId" value="@lModel.ItineraryId" /&
&input type="hidden" name="WhichDay" value="@lModel.WhichDay" /&
&input type="hidden" name="Scenery" value="@lModel.Scenery" /&
&input type="hidden" name="TravelProductId" id="TravelProductId" value="@lModel.TravelProductId" /&
&div class="info-r"&
&div class="pic-list"&
string[] imgArray = lModel.Scenery.Split('|');
foreach (var item in imgArray)
if (!string.IsNullOrEmpty(item))
&img src="@item" /&
&input type="file" id="uploadbtn@(i)"
&input type="button" value="从图库中选取" id="addimp@(i)" /&
&ul class="info-l"&
&li class="clock"&&input name="StartEndTravel" value="@lModel.StartEndTravel" /&&/li&
&li class="intro"&&textarea name="StrokeDescription"&@Html.Raw(lModel.StrokeDescription)&/textarea&&/li&
&li class="cup"&早餐：&input name="Breakfast" value="@lModel.Breakfast" /&中餐：&input name="Lunch" value="@lModel.Lunch" /&晚餐：&input name="Supper" value="@lModel.Supper" /&&/li&
&li class="house"&&input name="Stay" value="@lModel.Stay" /&&/li&
//MODEL.BusinessMan bman = DB.I_BusinessMan.GetLoginInfo();
&input type="hidden" id="loginname" name="loginname" value="King" /&
&div style="text-align:center"&
&img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="saveDays" /&
&div title="费用说明"&
string iscontains = "";
string nocontains = "";
string isFeeId = "";
string noFeeId = "";
var travefees = DB.I_TravelFee.GetListBy(s =& s.TravelProductId == lineID);
if (travefees != null)
foreach (var travefee in travefees)
if (travefee.IsContains.Value == true)
isFeeId += travefee.FeeId + ",";
iscontains += travefee.Description+"\n";
if (travefee.IsContains.Value == false)
noFeeId += travefee.FeeId + ",";
nocontains += travefee.Description + "\n";
&form id="feeform"&
&input type="hidden" value="@lineID" name="TravelProductId"/&
&div&费用包含:&/div&
&input type="hidden" value="@isFeeId" name="isFeeId" /&
&textarea style="width: 760 height: 230 resize: margin-left: 10" name="iscontains" id="iscontains"&@iscontains&/textarea&
&div&费用不含:&/div&
&input type="hidden" value="@noFeeId" name="noFeeId" /&
&textarea style="width: 760 height: 230 resize: margin-left: 10" name="nocontains" id="nocontains"&@nocontains&/textarea&
&div style="text-align:center"&
&img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="saveFee" /&
int TravelProductId = ViewBag.LineID;
var visa = DB.I_Visa.GetSingleModelBy(s =& s.TravelProductId == TravelProductId && s.VisaDocuments != "");
string doclist = "";
if (visa != null)
doclist = visa.VisaD
&div title="签证信息"&
&ul class="file-list clearfix"&
&li class="clearfix"&
&span class="floatL"&签证材料上传：&/span&
&span style="float:margin-top:-5"&
&input type="hidden" id="filelist" value="@doclist" /&
&input type="file" id="uploadfile" /&
&li id="file"&
var docArray = doclist.Split(',');
foreach (var item in docArray)
if (!string.IsNullOrEmpty(item))
string[] para = item.Split('|');
&a href="@para[1]" target="_blank"&@para[0]&/a&
&div id="visaTable"&&/div&
&div title="预订须知"&
string know = "";
string bookingids = "";
var bookings = DB.I_BookingInformation.GetListBy(s =& s.TravelProductId == lineID);
if (bookings != null)
foreach (var booking in bookings)
bookingids += booking.BookingInforId + ",";
know +=booking.Item+"\n";
&form id="knowForm"&
&input type="hidden" value="@lineID" name="TravelProductId" /&
&input type="hidden" value="@bookingids" name="bookingid"/&
&textarea style="width: 780 height: 480 resize: none" id="item" name="item"&@know&/textarea&
&div style="text-align:center"&
&img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="yuDing" /&
&div title="团期制作"&
&div class="panel-body panel-body-noheader panel-body-noborder"&
&ul class="calendar-title"&
&li class="mr10"&&span class="a-l" data-value="@nowDate.AddMonths(-1)"&&/span&@nowDate.ToString("yyyy年M月")&/li&
&li&@nowDate.AddMonths(1).ToString("yyyy年M月")&span class="a-r" data-value="@nowDate.AddMonths(1)"&&/span& &/li&
&div class="calendar-week"&
&ul class="mr5"&
@*&li&星期日&/li&*@
&li&星期一&/li&
&li&星期二&/li&
&li&星期三&/li&
&li&星期四&/li&
&li&星期五&/li&
&li&星期六&/li&
&li&星期日&/li&
@*&li&星期日&/li&*@
&li&星期一&/li&
&li&星期二&/li&
&li&星期三&/li&
&li&星期四&/li&
&li&星期五&/li&
&li&星期六&/li&
&li&星期日&/li&
&div class="calendar"&
&div class="mr7"&
@Html.Raw(ExtendClass.Calendar(nowDate, ViewBag.LineID))
@Html.Raw(ExtendClass.Calendar(nowDate.AddMonths(1), ViewBag.LineID))
&form id="group-form"&
&input name="date" type="hidden" id="date-list" /&
&input name="LineId" type="hidden" value="@ViewBag.LineID" /&
&ul class="group-price"&
&li&成人价：&input name="AdultPrice" class="liw40" value="200" /&&/li&
&li&成人外卖价：&input name="AdultTakeoutPrice" class="liw40" value="300" /&&/li&
&li&儿童价：&input name="ChildrenPrice" class="liw40" value="150" /&&/li&
&li&儿童外卖价：&input name="ChildrenTakeoutPrice" class="liw40" value="150" /&&/li&
&li&计划数：&input name="PlanBit" class="liw40" value="80" /&&/li&
@*&li&&input type="button" value="保存" id="btn-save" /&&/li&*@
&div style="text-align:float:"&
&img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="addtuanqi" /&
要弹出的页面
对layer弹出窗的后台处理
using System.Collections.G
using System.L
using System.W
using System.Web.M
using Newtonsoft.J
using MODEL;
using System.IO;
using System.N
using System.T
namespace Web.Controllers
public class GetDataController : BaseController
public ActionResult ShowUploadImgs()
//\\Upload\\TravelProduct\\King这个地址可以从前台传过来，以便使用其它目录
string strPath = "\\Upload\\TravelProduct\\King\\";
string filePath = System.Web.HttpContext.Current.Server.MapPath(strPath);
string[] dirs = Directory.GetDirectories(filePath);
string[] Files =Directory.GetFiles(filePath);
string fileNames = null;
for (int i = 0; i & Files.L i++)
string temp = Files[i].Substring(Files[i].LastIndexOf('\\') + 1);
fileNames +=temp+"|";
//return fileN
ViewBag.fileNames = fileNames.TrimEnd('|');
return view();
GetDataController
图片浏览并选择所要的图片
BLL.IBLL DB = new BLL.IBLL();
DateTime nowDate = DateTime.N
ViewBag.Title = "图片显示";
ViewBag.KeyWords = "";
ViewBag.Description = "";
//if (ViewBag.nowDate != "")
string NowDate = ViewBag.nowD
nowDate = DateTime.Parse(NowDate);
&script src="~/Scripts/jquery-1.8.3.min.js"&&/script&
&script src="~/EasyUI/jquery.easyui.min.js"&&/script&
&script src="~/Scripts/layer2/layer.min.js"&&/script&
$(function () {
var fnames = "";
$('input[type=checkbox]').click(function () {
$('#filenames').val("");
$('input[type=checkbox]').each(function (index) {
if ($('input[type=checkbox]').eq(index).attr("checked"))
$('#filenames').val($('#filenames').val()+$('input[type=checkbox]').eq(index).val() + ",");
&div id="imgs"&
string fileNames = ViewBag.fileN
if (!string.IsNullOrEmpty(fileNames))
string[] files = fileNames.Split('|');
@{ foreach (var filename in files)
&img src="/Upload/TravelProduct/King/@filename" style="width:150margin-left:20"&
&input type="checkbox" value="@filename" style="margin-left:-20"/&
&div&你还没有上传片！&/div&
&input type="hidden" id="filenames" /&
ShowUploadImgs.cshtml2010年8月 Web 开发大版内专家分月排行榜第三
2010年8月 Web 开发大版内专家分月排行榜第三
2010年10月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。开源中国 - 找到您想要的开源项目，分享和交流
当前访客身份：游客 [
MongoDB在3.0之前一直使用mmap引擎作为默认存储引擎，本篇从源码角度对mmap引擎作分析，业界一直以来对1...
百度开源的万亿量级数据库Tera发布0.5.2版本。 Tera简介 Tera是一个高性能、可伸缩的结构化数据存储系统...
最新人才入驻
?1,000 / 天
最新作品与服务
30回/4622阅
By JacCoffee
35回/4105阅
1回/1419阅
By 魔幻之翼
3回/1084阅
By D大调协奏曲
By 吾乃初学者
By helloclia
By 卖蜡笔的小新
热门招聘城市:
推荐招聘企业
最新招聘信息
10K-18K/上海
25-40K/深圳
8-15K/泉州
15-25K/上海上海
15-25K/上海徐汇
10-15K/南宁
15-25K/北京
15-25K/北京
By freezingsky
By freezingsky
29评/3165阅
By freezingsky
By freezingsky
11评/666阅
21评/1095阅
26评/1345阅
17评/3055阅
By joy_zheng
19评/1473阅
By 骑着蚂蚁追月亮
8评/1427阅
本周推荐 TestCafe
是一个用于测试Web应用程序的纯
端到端解决方案。 它负责所有阶段：启动浏览器，运行测试，收集测试结果和生成报告。 TestCafe不需要浏览器插件，它在所有流行的现代浏览器开箱即用。
最新推荐博客文章
团队协作开发平台，周报，便签，任务管理，应有尽有，轻松管理轻量级团队。
开源中国社区团队基于开源项目 GitLab 开发的在线代码托管平台。
开源中国基于Sonar打造的代码质量管理系统，与 Git@OSC 紧密结合。
开源中国社区团队跟 MoPaaS 合作，为开发者提供更可靠的代码托管和演示服务。
提供在线CSS/JS 调试，在线API文档,Less CSS编译器等在线工具。
在线编辑测试JS/HTML/CSS的工具,实时预览、保存、分享、Fork。
低成本畅享30+云产品，轻松稳定过渡上云。
扫一扫，关注OSChina微信公共账号
+ 友情链接