webUploaderer 插件

引入资源:

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">


<!--引入JS-->
<script type="text/javascript" src="webuploader/webuploader.js"></script>

HTML部分:

<div id="uploadimg">
                 <div id="fileList" class="uploader-list"></div> 
                 <div id="filePicker">选择图片</div>            
</div>

js部分:

jQuery(function() {
    var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,


        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,


        // Web Uploader实例
        uploader;


    // 初始化Web Uploader
    uploader = WebUploader.create({


        // 自动上传。
        auto: true,


        // swf文件路径  
        swf: '/Uploader.swf', 


       // 文件接收服务端。  
       server: '/index.php?op=deal&task=uploadCommentPic',
  //自定义参数
  formData: {
       
    },


        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',


        // 只允许选择文件，可选。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });


    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
            $img = $li.find('img');


        $list.append( $li );


        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }


            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });


    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');


        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }


        $percent.css( 'width', percentage * 100 + '%' );
    });


    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
   uploader.on( 'uploadSuccess', function(file,response) {  
    var filename = response._raw
    var c = "<input type='hidden' name=pic[] value='"+filename+"'>";
$("#comment_form").append(c);
       $( '#'+file.id ).addClass('upload-state-done');  
   });


    // 文件上传失败，现实上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');


        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }


        $error.text('上传失败');
    });


    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
}); 




$(function (){

/* 用按钮控制图片左右滚动 */
$(".hotpic,.all-look,.book-new").Slide({
effect:"scroolLoop",
autoPlay:false,
speed:"normal",
timer:3000,
steps:1
});

/* banner图片左右滚动 */
$(".banner-l").Slide({
effect:"scroolX",
speed:"normal",
timer:2000
});

/* 选项卡 */
$('.books-box-bt li').hover(function(){
$(this).addClass('on').siblings().removeClass('on');
$('.books-box-nr>ul:eq('+$(this).index()+')').show().siblings().hide();
})

/* 商品详情-评论 */
window.onload = function()
{
var $li = $('.detailed-l-tab span,.bookstore-con-tab span');
var $ul = $('.detailed-l-con,.bookstore-l-con');

$li.click(function(){
var $this = $(this);
var $t = $this.index();
$li.removeClass();
$this.addClass('this');
$ul.css('display','none');
$ul.eq($t).css('display','block');
})
}
});