该篇是webuploader 同步上传教程,这个插件使用需要配置的蛮多的,可以考虑使用插件BootStrap-FileInput
本篇涉及到该插件文件上传、自定义参数、图片删除
先看效果
我在结尾总结下,图片怎么跟当前信息绑定起来的方案。
官方下载的插件包里,没有小图标,可以F12找到路径,然后另存为
修改下demo.js的配置路径(上传、删除地址)
//前台部分,初始化webuploader 在demo.js里
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>百度文件上传控件</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/webuploader/webuploader.css" rel="stylesheet" />
<link href="~/Scripts/webuploader/demo.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/webuploader/webuploader.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/webuploader/demo.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div id="uploader" class="wu-example">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker" class="webuploader-container"><div class="webuploader-pick">点击选择图片</div><div id="rt_rt_1bgaoa8gj1agt136q15n7a011piv1" style="position: absolute; top: 0px; left: 448px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div>
<p>或将照片拖到这里,单次最多可选10张</p>
</div>
<ul class="filelist"></ul>
</div>
<div class="statusBar" style="display:none;">
<div class="progress" style="display: none;">
<span class="text">0%</span>
<span class="percentage" style="width: 0%;"></span>
</div><div class="info">共0张(0B),已上传0张</div>
<div class="btns">
<div id="filePicker2" class="webuploader-container"><div class="webuploader-pick">继续添加</div><div id="rt_rt_1bgaoa8gp1spq1ea91li71tf816oh6" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div><div class="uploadBtn state-pedding">开始上传</div>
</div>
</div>
</div>
</div>
</body>
</html>
//demo.js 注意红色部分
// 添加全局站点信息
var BASE_URL = '~/Scripts/webuploader';
jQuery(function () {
var $ = jQuery, // just in case. Make sure it's not an other libaray.
$wrap = $('#uploader'),
// 图片容器
$queue = $('<ul class="filelist"></ul>')
.appendTo($wrap.find('.queueList')),
// 状态栏,包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),
// 文件总体选择信息。
$info =