昨天初步将webuploader用在了项目中,但紧接着就发现了一个问题,每一个页面都需要写那么多初始化webUploader的代码,这样肯定是我不能接受的,于是花了半天时间对该控件进行了封装。

  最后,只需要引用这一个js文件即可。

  

<script src="~/webuploader/WebUploader_MVC.js"></script>

  然后在视图里面加上这几句,其中input是用来在编辑视图中使用,其中PhotoUrls是视图实体属性,用来保存修改后所有图片的urls。

      <div id="uploader" style="margin-left: 10px">
<div id="fileList"></div>
      <input type="hidden" id="PhotoUrls" name="PhotoUrls" value="" />
</div>

  再在js里面初始化即可:

    $("#uploader").CreateWebUpload({
auto: true,//即时自动上传
fileNumLimit: ,//限制上传图片数量
server: '/Helper/UpLoadProcess'//处理上传的服务端
});

  服务端的代码和之前的一样,没有什么改变。

  

var photoUrls = $("#uploader").GetFilesAddress();//该方法用来获取所有上传的图片URLS,不管是新增视图界面还是编辑视图界面。

【项目相关】MVC中将WebUploader进行封装的更多相关文章

  1. 9.2.2 .net framework下的MVC 控件的封装(下)

    控件封装的部分说明 可能有人觉得应该前后端分离,我也承认这是应该的方向,我们也在考虑使用ng2等简化前端.但是,我们封装控件还是因为如下原因综合考虑的: 我们这是个框架,上面支撑了许多个应用,包含几百 ...

  2. Idea 搭建Maven--web项目(MVC)

    小编最近正在学习使用MVC框架,在搭建Maven的项目过程中,遇到了很多问题,上网搜了很多材料才找到答案,为了小编以后查起来方便,也为了向广大小伙伴分享,写了这部片博文,敬我昨天一天的学习结果! 步骤 ...

  3. ASP.NET MVC中将数据从Controller传递到视图

    ASP.NET MVC中将数据从Controller传递到视图方法 1.ViewData ViewData的类型是字典数据,key-value 如:ViewData["Data"] ...

  4. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  5. 根据funID,personID获取最新规划包项目相关信息

    1.定义:根据funID,personID获取最新规划包项目相关信息(code projecttype(阶段) Pname(code+name) projectID) 项目表tbl_cfg_Proje ...

  6. 用maven创建web项目(spring Mvc)

    用maven创建web项目(spring Mvc) 1.打开cmd进入到你要创建maven项目的目录下: 2.输入以下命令.然后根据提示输入相应的groupId.artifactId.version: ...

  7. 四、spring集成ibatis进行项目中dao层基类封装

    Apache iBatis(现已迁至Google Code下发展,更名为MyBatis)是当前IT项目中使用很广泛的一个半自动ORM框架,区别于Hibernate之类的全自动框架,iBatis对数据库 ...

  8. django_day10_项目相关

    django_day10_项目相关 展示数据的方法 数据对象obj 普通字段 obj.字段名 ====> 数据库该字段的值 带choices参数的 obj.字段名 ====> 数据库该字段 ...

  9. django_day11_项目相关

    django_day11_项目相关 新增和编辑 路由 url(r'^category_add/$', views.category_change, name='category_add'), url( ...

随机推荐

  1. C++学习15 继承权限和继承方式

    C++继承的一般语法为: class 派生类名:[继承方式] 基类名{ 派生类新增加的成员 }; 继承方式限定了基类成员在派生类中的访问权限,包括 public(公有的).private(私有的)和 ...

  2. spring整合struts

    整合目标:使用spring的bean管理struts action service. 整合步骤: 一.加入spring 1.加入spring jar包 2.配置web.xml文件 <contex ...

  3. 安装jdk java -version 不是自己所需要的版本

    原服务器安装有1.4的jdk,应用需要安装1.6的jdk.安装完毕后在/etc/profile里配置1.6jdk的环境变量后使用命令java -version显示还是原来的1.4的版本. 解决办法: ...

  4. PL/SQL Developer使用技巧、快捷键

    1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动大写:Tools-& ...

  5. sql server远程访问Oracle数据库

    在sql server上新建了连接服务器后 在指定的链接服务器上执行指定的传递查询. 该服务器是 OLE DB 数据源. OPENQUERY 可以在查询的 FROM 子句中引用,就好象它是一个表名. ...

  6. ubuntu14.04开启crontab日志

    ubuntu默认没有开启cron日志记录 1. 修改rsyslog sudo vim /etc/rsyslog.d/50-default.conf cron.* /var/log/cron.log # ...

  7. H264-AVS POC理解

    H264码流的输出顺序是编码顺序,所以在编码B帧的时候,由于B是双向预测,需要先编码后面编码帧P/I,这时候先输出I/P,后面才有B帧. 在解码段拿到相应的I/P帧后,不能马上丢到buffer lis ...

  8. ASP.NET MVC 之 View 测试

    项目又出问题了!手贱了一下,使用某个工具整理了一下 View 中的内容,不经意之间,将 View 的输出中大小写不小心搞错了,导致输出的内容没有办法正常解析. 这种问题太隐蔽了,下次再遇到怎么办呢? ...

  9. MSP430F149学习之路——捕获/比较模式

    1.捕获模式 #include <msp430x14x.h> unsigned ,last1=; unsigned ,j=; void mian(void) { WDTCTL = WDTP ...

  10. 在java 中,数组与 List<T> 类型的相互转换

    在java中,数组与List<T> 之前进行互相转换,转换方法可总结为以下几种: 一. 将 数组转换成List<T> 1. 使用 Collections 的addAll 方法 ...