C# MVC webuploader同步上传前后台详解教程（提供同步、异步上传源码下载链接地址）

最新推荐文章于 2024-05-10 15:34:00 发布

置顶

yz-俞祥胜

最新推荐文章于 2024-05-10 15:34:00 发布

阅读量5.2k

点赞数

分类专栏：实用前端插件学习

本文链接：https://blog.csdn.net/yu18352566889/article/details/78499072

版权

该篇是webuploader 同步上传教程,这个插件使用需要配置的蛮多的，可以考虑使用插件BootStrap-FileInput本篇涉及到该插件文件上传、自定义参数、图片删除先看效果我在结尾总结下，图片怎么跟当前信息绑定起来的方案。//前台部分，初始化webuploader 在demo.js里百度文件上传控件

摘要由CSDN通过智能技术生成

该篇是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 =

最低0.47元/天解锁文章

yz-俞祥胜

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
C# MVC webuploader同步上传前后台详解教程（提供同步、异步上传源码下载链接地址）

该篇是webuploader 同步上传教程,这个插件使用需要配置的蛮多的，可以考虑使用插件BootStrap-FileInput本篇涉及到该插件文件上传、自定义参数、图片删除先看效果我在结尾总结下，图片怎么跟当前信息绑定起来的方案。//前台部分，初始化webuploader 在demo.js里百度文件上传控件
复制链接

扫一扫