素材牛VIP会员

WebUploader大文件上传

 所属分类:PHP/MySql-上传

 浏览:21193次-  下载:3846次-  评论:20次-  更新时间:2020-08-20
WebUploader大文件上传
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:我们在上传大文件时都遇到过这样或那样的问题,设置很大的maxRequestLength值并不能完全解决问题,除了允许你上传大文件外,还能实时显示上传进度并捕获上传中的错误信息

基础属性

  • 难易中级
  • 语言PHP
  • 数据库

详细介绍

HTML

<div id="uploader"> 
    <div class="queueList"> 
        <div id="dndArea" class="placeholder"> 
            <div id="filePicker"></div> 
            <p>或将照片拖到这里,单次最多可选300张</p> 
        </div> 
    </div> 
    <div class="statusBar" style="display:none;"> 
        <div class="progress"> 
            <span class="text">0%</span> 
            <span class="percentage"></span> 
        </div><div class="info"></div> 
        <div class="btns"> 
            <div id="filePicker2"></div><div class="uploadBtn">开始上传</div> 
        </div> 
    </div> 
</div>

引入jQuery库和webuploader相关组件

<link rel="stylesheet" type="text/css" href="css/webuploader.css" /> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/webuploader.js"></script> 
<script type="text/javascript" src="js/upload.js"></script>

js/upload.js

uploader = WebUploader.create({ 
    pick: { 
        id: '#filePicker', 
        label: '点击选择图片' 
    }, 
    formData: { 
        uid: 123 
    }, 
    dnd: '#dndArea', 
    paste: '#uploader', 
    swf: 'js/Uploader.swf', 
    chunked: false, 
    chunkSize: 512 * 1024, 
    server: 'server/fileupload.php', 
    // runtimeOrder: 'flash', 
    // accept: { 
    //     title: 'Images', 
    //     extensions: 'gif,jpg,jpeg,bmp,png', 
    //     mimeTypes: 'image/*' 
    // }, 
    // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 
    disableGlobalDnd: true, 
    fileNumLimit: 300, 
    fileSizeLimit: 200 * 1024 * 1024, 
    // 200 M 
    fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M 
});

相关素材 - 上传

讨论这个素材(20)回答他人问题或分享使用心得会奖励牛币

co***ky  
2020年02月26日

这个不下载你就白来了

回复
陈***6  
2020年02月28日

正需要这功能.....

回复
15***75  
2020年03月06日

看看webuploader

回复
ed***on  
2020年03月13日

此插件也是经常要用

回复
zz***25  
2020年03月19日

功能强大

回复
ga***et  
2020年03月20日

观察 开启观察者模式

回复
un***oo  
2020年03月23日

需要啊

回复
se***ng  
2020年04月01日

这个插件也是很有用

回复
谢***1  
2020年04月07日

hao hao hao

回复
us***es  
2020年04月20日

很好的例子

回复
那***哦  
2020年05月16日

开启观察者模式

回复
雨***落  
2020年05月23日

下载下来也没法用

回复
爱***丘  
2020年06月25日

要是能同时上传多个 带移动的就完美了

回复
亡***师  
2020年06月26日

真是好东西

回复
霸***解  
2020年07月19日

这个插件是百度的,已经使用过

回复
霸***空  
2020年07月19日

外观还是蛮漂亮的,可惜感觉好麻烦

回复
ai***ft  
2020年08月01日

很好的东西啊

回复
郭***己  
2020年08月18日

讲解很详细,good

回复
qq***93  
2020年08月20日

很好的东西

回复
qq***46  
2020年09月29日

此插件也是经常要用

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:3846
所需牛币:100 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)