WebUploader大文件上传

来源:https://www.sucaihuo.com/php/268.html 2015-08-20 04:39浏览(20225) 收藏

我们在上传大文件时都遇到过这样或那样的问题,设置很大的maxRequestLength值并不能完全解决问题,除了允许你上传大文件外,还能实时显示上传进度并捕获上传中的错误信息
WebUploader大文件上传
分类:PHP > 上传 难易:中级
查看演示 下载资源: 3836 下载资源 下载积分: 125 积分

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
});
评论34
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 33楼
    11-06 16:48
    亮***亮
    讲解很详细,good
  • 头像 32楼
    11-15 14:24
    那***雨
    功能强大
  • 头像 31楼
    09-18 14:07
    h***g
    hao hao hao
  • 头像 30楼
    05-19 09:26
    假***车
    说实话,这个个官网的一模一样!感觉没啥区别,
  • 头像 29楼
    03-28 10:36
    1***4
    我只要大文件分割上传就行了,后台能够接收切片并合并后返回文件路径,这个是多图片上传,不适合我
  • 头像 28楼
    03-17 13:52
    w***i
    看看webuploader
  • 头像 27楼
    03-16 16:15
    轩***室
    如果DEMO能带上数据库就更好了
    1
    c***2:

    带数据库貌似和控件无关吧...

  • 头像 26楼
    12-13 17:18
    n***1
    外观还是蛮漂亮的,可惜感觉好麻烦
  • 头像 25楼
    12-09 18:58
    y***i
    要是能同时上传多个 带移动的就完美了
  • 头像 24楼
    12-06 11:28
    j***9
    这个文件限额为多少呀,fentaigaole
1 2