【续一】觉得蛋疼的上传控件

本文介绍了一种改进后的上传控件,该控件允许在同一页面中使用多个实例进行图片的拖拽及点击上传,并提供了详细的代码示例。

上一篇 觉得蛋疼的上传控件

今天改写了全部代码,耗时又耗精力,可以升级控件咯。没有做太多的功能改动,只是觉得之前只能适用于页面只有一个控件的情况下,如果一个页面可以多用几个控件多好。

先果断上图:

页面中展现了使用四个控件的情况。

示例代码如下:

 

<html>
<head>
<title>
拖拽+单击上传个人照片或LOGO
</title>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.dacupload-1.2.0.js"></script>
<script>
$(document).ready(function () {
$('#LOGO_PHOTO_0').DACUpload({
IsShow: false,
IsEdit: false,
Height: '230',
Width: '230',
UploadUri: '@ViewBag.apiUri',//上傳的路徑
DownloadUri: '@ViewBag.DownLoadUri',//下載的路徑
MaxLoadSize: '@ViewBag.AttachmentMaxLoadSize',//上傳大小限制
FilePath: '@ViewBag.DownLoadUri' + 'TueJul142009125225GMT0800595284imagejpeg.jpg',//示例顯示圖片
Language: 'zh_TW', //多語系設置,目前只有三種:zh_CN zh_TW en_US
});

$('#LOGO_PHOTO_1').DACUpload({
IsShow: true,
IsEdit: true,
Height: '230',
Width: '230',
UploadUri: '@ViewBag.apiUri',//上傳的路徑
DownloadUri: '@ViewBag.DownLoadUri',//下載的路徑
MaxLoadSize: '@ViewBag.AttachmentMaxLoadSize',//上傳大小限制
FilePath: '@ViewBag.DownLoadUri' + 'TueJul142009125225GMT0800595284imagejpeg.jpg',//示例顯示圖片
Language: 'zh_TW', //多語系設置,目前只有三種:zh_CN zh_TW en_US
});

$('#LOGO_PHOTO_2').DACUpload({
IsShow: false,
IsEdit: true,
Height: '230',
Width: '230',
UploadUri: '@ViewBag.apiUri',//上傳的路徑
DownloadUri: '@ViewBag.DownLoadUri',//下載的路徑
MaxLoadSize: '@ViewBag.AttachmentMaxLoadSize',//上傳大小限制
FilePath: '@ViewBag.DownLoadUri' + 'TueJul142009125225GMT0800595284imagejpeg.jpg',//示例顯示圖片
Language: 'zh_TW', //多語系設置,目前只有三種:zh_CN zh_TW en_US
});

$('#LOGO_PHOTO_3').DACUpload({
IsShow: true,
IsEdit: false,
Height: '230',
Width: '230',
UploadUri: '@ViewBag.apiUri',//上傳的路徑
DownloadUri: '@ViewBag.DownLoadUri',//下載的路徑
MaxLoadSize: '@ViewBag.AttachmentMaxLoadSize',//上傳大小限制
FilePath: '@ViewBag.DownLoadUri' + 'TueJul142009125225GMT0800595284imagejpeg.jpg',//示例顯示圖片
Language: 'zh_TW', //多語系設置,目前只有三種:zh_CN zh_TW en_US
});

});
</script>
</head>
<body>
<div id="LOGO_PHOTO_0" style="margin-left:100px;float:left;"></div>
<div id="LOGO_PHOTO_1" style="margin-left:100px;float:left;"></div>
<div id="LOGO_PHOTO_2" style="margin-left:100px;float:left;"></div>
<div id="LOGO_PHOTO_3" style="margin-left:100px;float:left;"></div>
</body>
</html>

 

 今天就修改到这里吧,明天继续完善,同时完善文档。期望这个控件更加的稳定。

 (:

 

转载于:https://www.cnblogs.com/liuhong1happy/p/3956267.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值