【项目相关】MVC中将WebUploader进行封装

  昨天初步将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: 5,//限制上传图片数量
              server: '/Helper/UpLoadProcess'//处理上传的服务端
                });

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

  

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

 

转载于:https://www.cnblogs.com/cemaster/p/5610860.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ASP.NET MVC WebUploader 是一个基于 ASP.NET MVC 框架的文件上传插件。 首先,ASP.NET MVC 是一种基于模型-视图-控制器(MVC)的框架,适用于构建 Web 应用程序。它提供了一种分离关注点的架构模式,使开发人员能够更好地组织和管理代码。 WebUploader 是一个 JavaScript 插件,可以实现在 Web 页面中进行文件上传的功能。它具有以下特点: 1. 多文件上传:WebUploader 允许用户一次选择并上传多个文件,大大提高了效率。 2. 断点上传:如果上传过程中出现网络中断或其他问题,WebUploader 支持断点续传功能,能够从断点处恢复上传,减少数据的丢失。 3. 异步上传:WebUploader 使用异步上传方式,即文件在上传过程中不会阻塞用户的其他操作。 4. 文件验证:WebUploader 可以对文件类型、大小等进行验证,确保上传的文件符合预期。 基于 ASP.NET MVC 框架,使用 WebUploader 可以实现以下步骤: 1. 在项目中引入 WebUploader 插件的相关文件,包括 JavaScript 和 CSS 文件。 2. 在 View 视图文件中添加文件上传的 HTML 元素,用于显示文件上传按钮和进度条等界面。 3. 在 Controller 控制器中编写处理文件上传的代码逻辑,包括验证上传文件的类型和大小等,并将文件保存到服务器指定的位置。 4. 在 View 视图文件中使用 JavaScript 脚本,与服务器进行交互,包括初始化 WebUploader、处理上传过程和结果等。 通过以上步骤,可以实现在 ASP.NET MVC 项目中使用 WebUploader 插件进行文件上传的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值