WebUploader大文件上传

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 
});