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

Posted 2020-07-28 nodejsc

　　昨天初步将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，不管是新增视图界面还是编辑视图界面。