1.引入js和css文件

    //引入js文件

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

    //引入css文件(也可以自己写按钮的样式，不引入)，这里是自己写的css样式

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

    #uploader-demo {

            position: relative;         }         #filePicker {             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 100%;         }         #filePicker label {             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 100%;             z-index: 10;         }         #filePicker input[type="file"] {             display: none;         }

2.html布局

    <div id="uploader-demo">

        <!--这里是存放文件信息-->         <div id="fileList" class="uploader-list"><img src="" id="img"></div>         <div id="filePicker">选择图片</div>     </div>

3.js实现部分

    //初始化WebUploader

    var uploader = WebUploader.create({         //swf的路径，可以不用写         swf: BASE_URL + 'xxx.swf'         //文件接收服务器         server: 'json/update.json',         //现在文件的按钮         pick: '#filePicker',         // 上传的类型         accept: {             title: 'Images',             mimeTypes: 'image/*'         }     });     //上传中     uploader.on('uploadProgress', function(file, percentage){         //percentage 上传的进度         console.log('上传中...');     });

    //上传成功

    uploader.on('uploadSuccess', function(file, data){         console.log('上传成功');         console.log(data.listText[0].imgUrl);         $('#img').attr( 'src', data.listText[0].imgUrl );     });

    //上传出错

    uploader.on('uploadError', function(file){         console.log('上传出错');     })

    //上传完了

    uploader.on('uploadComplete', function(file){         console.log('上传完了');     });