页面从服务器中浏览并添加图片显示
底层页面
<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" /> <script> $(function(){ $('.travel-info').dialog({ title: "日程添加/修改", closed: false, cache: false, modal: true, width: 800, height: 600, href: '/GetData/SetDays?lineID=' + LineID + "&days=" + $('#TravelDays').val(), }); }); </script> <body> ........... <ul> <li style="text-align:center;width:700px;"><img src="/Theme/NewBlueVacation/Images/an_baocun_03.png" style="vertical-align:middle;" /><input type="button" class="supplier-save" value="" id="SaveTravelProduct" style="width:70px;margin-right:20px;color:white;" /><input type="button" class="supplier-save copy" value="" id="SaveTravelProductCopy" style="width:70px;margin-right:20px;color:white;" /> <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" id="btn-add" style="display:none;height:25px;">添加行程</a> <a href="#" id="btn-prview" style="display:none;" target="_blank">预览</a></li> </ul> ……………… <div class="travel-info"> </div> </body>
后台处理代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Common;
using MODEL;
using System.IO;
using System.Net;
using System.Transactions;
namespace Web.Controllers
{
public class GetDataController : BaseController
{
public ActionResult SetDays(int LineID = 0, int days = 0)
{
ViewBag.LineID = LineID;
ViewBag.days = days;
return view();
}
}
}
SetDays.cshtml处理页面
@using Web; @{ Layout = null; BLL.IBLL DB = new BLL.IBLL(); DateTime nowDate = DateTime.Now; //if (ViewBag.nowDate != "") //{ // string NowDate = ViewBag.nowDate; // 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" /> <script> 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'); $.layer({ type: 2, border: [0], title: "选择已上传图片", shadeClose: true, closeBtn: false, scrolling: 'auto', maxmin:true, btns: 1, 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.length; 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.length; 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: '*.jpg;*.png;*.gif;*.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'); } else { $.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: '*.jpg;*.png;*.gif;*.bmp;*.doc;*.docx;*.pdf', onUploadSuccess: function (file, data, response) { if (data == "0") { $.messager.alert("提示", "上传失败!", 'error'); } else { $('#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 '是'; } else { 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); } else { $.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'); } else { $.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('提示', '没有数据可保存为模板', '提示'); } else { $.messager.prompt('提示信息', '请输入你要保存的模板名：', function (r) { if (r) { var IdList = ""; for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (IdList == "") { IdList = row.VisaId; } else { 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) { post(1); }, 'json'); }); //保存行程结束 //保存费用说明 $('#saveFee').click(function () { $.post('/GetData/SaveTravelFees/', $('#feeform').serialize(), function (data) { if (data.sucess) { layer.msg(data.msg, 2, 9); } else { 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); } else { 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, '')); } else { $('#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); } else { 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'); } else { $.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'); } } </script> <div class="easyui-tabs"> <div title="行程描述"> <div id="tt" class="easyui-tabs"> @{ int lineID = ViewBag.LineID; } @for (int i = 1; i <= ViewBag.days; i++) { MODEL.LineItinerary lModel = DB.I_LineItinerary.GetSingleModelBy(s => s.TravelProductId == lineID && s.WhichDay == i); if (lModel == null) { <div title="第 @i 天" style="padding:10px;height:460px;"> <form> <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> <div> <input type="file" id="uploadbtn@(i)" /> <input type="button" value="服务器添加" id="addimp@(i)" /> </div> </div> <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> </ul> </form> </div> } else { <div title="第 @i 天" style="padding:10px;height:460px;"> <form> <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" /> } } } </div> <div> <input type="file" id="uploadbtn@(i)" /> <input type="button" value="从图库中选取" id="addimp@(i)" /> </div> </div> <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> </ul> </form> </div> } } @{ //MODEL.BusinessMan bman = DB.I_BusinessMan.GetLoginInfo(); } <input type="hidden" id="loginname" name="loginname" value="King" /> </div> <div style="text-align:center"> <img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="saveDays" /> </div> </div> <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>费用包含:</div> <div> <input type="hidden" value="@isFeeId" name="isFeeId" /> <textarea style="width: 760px; height: 230px; resize: none; margin-left: 10px;" name="iscontains" id="iscontains">@iscontains</textarea> </div> </div> <div> <div>费用不含:</div> <div> <input type="hidden" value="@noFeeId" name="noFeeId" /> <textarea style="width: 760px; height: 230px; resize: none; margin-left: 10px;" name="nocontains" id="nocontains">@nocontains</textarea> </div> </div> <div style="text-align:center"> <img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="saveFee" /> </div> </form> </div> @{ int TravelProductId = ViewBag.LineID; var visa = DB.I_Visa.GetSingleModelBy(s => s.TravelProductId == TravelProductId && s.VisaDocuments != ""); string doclist = ""; if (visa != null) { doclist = visa.VisaDocuments; } } <div title="签证信息"> <ul class="file-list clearfix"> <li class="clearfix"> <span class="floatL">签证材料上传：</span> <span style="float:left;margin-top:-5px;"> <input type="hidden" id="filelist" value="@doclist" /> <input type="file" id="uploadfile" /> </span> </li> <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> } } } </li> </ul> <div id="visaTable"></div> </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"/> <div> <textarea style="width: 780px; height: 480px; resize: none" id="item" name="item">@know</textarea> </div> </form> <div style="text-align:center"> <img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="yuDing" /> </div> </div> <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> </ul> <div class="calendar-week"> <ul class="mr5"> @*<li>星期日</li>*@ <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期日</li> </ul> <ul> @*<li>星期日</li>*@ <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期日</li> </ul> </div> <div class="calendar"> <div class="mr7"> @Html.Raw(ExtendClass.Calendar(nowDate, ViewBag.LineID)) </div> <div> @Html.Raw(ExtendClass.Calendar(nowDate.AddMonths(1), ViewBag.LineID)) </div> </div> <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>*@ </ul> </form> </div> <div style="text-align:center;float:none;"> <img src="~/Theme/NewBlueVacation/Images/2_xin_baocun3.png" style="cursor:pointer" id="addtuanqi" /> </div> </div> </div>
对layer弹出窗的后台处理
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Newtonsoft.Json; using Common; using MODEL; using System.IO; using System.Net; using System.Transactions; 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.Length; i++) { string temp = Files[i].Substring(Files[i].LastIndexOf('\\') + 1); fileNames +=temp+"|"; } //return fileNames; ViewBag.fileNames = fileNames.TrimEnd('|'); return view(); } } }
图片浏览并选择所要的图片
@using Web; @{ BLL.IBLL DB = new BLL.IBLL(); DateTime nowDate = DateTime.Now; ViewBag.Title = "图片显示"; ViewBag.KeyWords = ""; ViewBag.Description = ""; //if (ViewBag.nowDate != "") //{ // string NowDate = ViewBag.nowDate; // 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> <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() + ","); } }); }); }); </script> <div id="imgs"> @{ string fileNames = ViewBag.fileNames; if (!string.IsNullOrEmpty(fileNames)) { string[] files = fileNames.Split('|'); <dl> <dt> @{ foreach (var filename in files) { <img src="/Upload/TravelProduct/King/@filename" style="width:150px;margin-left:20px;"> <input type="checkbox" value="@filename" style="margin-left:-20px;"/> } } </dt> </dl> } else { <div>你还没有上传片！</div> } } <input type="hidden" id="filenames" /> </div>
posted on 2015-03-19 10:04 波澜不惊super 阅读(1951) 评论(0) 编辑 收藏 举报
