webuploader上传文件插件

在珍立拍论坛中发表说说，可以发表文字和图片说说，在发表图片说说时希望可以同时上传多张图片，于是就使用了webuploader插件。

使用该插件可以在上传图片前预览图片，可限制单个文件大小和单次上传图片个数，支持文件多选，类型过滤，拖拽，图片粘贴。

在页面需要的位置添加代码：

<div id="container" >

<div id="uploader" >

                <div class="queueList">

                    <div id="dndArea" class="placeholder">

                        <div id="filePicker"></div>

                        <p>或将照片拖到这里，单次最多可选9张，单个文件大小不超过2M</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>

            </div>

            <script src="/Javascript/webuploader/upjquery.js" type="text/javascript"></script>

    <script type="text/javascript" src="/Javascript/webuploader/webuploader.js"></script>

    <script type="text/javascript" src="/Javascript/webuploader/upload.js"></script>

加载css文件：

<link rel="stylesheet" type="text/css" href="/css/webuploader.css" />

    <link rel="stylesheet" type="text/css" href="/css/uploadstyle.css" />

在页面加载完成后就实例化uploader（在uploader.js中）

 // 实例化

        uploader = WebUploader.create({

            pick: {      //选择图片按钮

                id: '#filePicker',

                label: '点击选择图片'

            },

            formData: {     //上传图片时附带的参数

                uid: 123

            },

            dnd: '#dndArea',       //指定可拖拽的容器

            paste: '#uploader',      //监听粘贴事件的容器

            swf: './Uploader.swf',   //swf

            chunked: false,           //是否分片上传

            chunkSize: 512 * 1024,   //分片大小

            server: '/Gagbbs/uploadfile', //上传文件服务端

            accept: {      //允许的文件类型

                title: 'Images',

                extensions: 'gif,jpg,jpeg,bmp,png',

                mimeTypes: 'image/*'

            },

           

            disableGlobalDnd: true,       // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。

            fileNumLimit: 9,      //上传文件个数

            fileSizeLimit: 200 * 1024 * 1024,    // 200 M     上传文件总大小

            fileSingleSizeLimit: 2 * 1024 * 1024    // 2 M    单个文件大小

        });

在发表图片说说时，图片需要对应的说说的ID，所以上传图片前先要对发帖表插入一条新的说说数据并返回对应的ID作为图片的附带参数一起上传到服务端：

要在uploader执行图片上传之前插入一段代码：

$upload.on('click', function() {

            if ( $(this).hasClass( 'disabled' ) ) {

                return false;

            }

            if ( state === 'ready' ) {

            var cont=$("#printcont").val();

            $.ajax({    //插入一条新的说说数据并返回ID

            type: "POST",

            url: "/Gagbbs/printinfo",

            data:"cont="+cont,

            success: function(msg){

            var ms=eval('('+msg+')');

            var id=ms["PostingID"];

              //给上传的图片添加附带参数

            uploader.options.formData.pid = id;

              //上传图片

            uploader.upload();

            }

            });

            } else if ( state === 'paused' ) {

                uploader.upload();

            } else if ( state === 'uploading' ) {

                uploader.stop();

            }

        });

服务端/Gagbbs/uploadfile返回json数据，uploader根据uploadAccept事件判断服务端的返回结果

uploader.on( 'uploadAccept', function( file, response ) {

            if ( response.code==1 ) {

                // 通过return false来告诉组件，此文件上传有错。

                return false;

            }

        });

所用到的相关swf，js以及css文件下载地址：

http://pan.baidu.com/s/1gdf5cI3