jquery上传图片功能

上传图片是做网站过程中经常会出现的功能，总结如下
1.uploadify插件，可以参考网上的例子，很多，但是不足是不支持移动端
2.webuploader，这个可以很好的支持移动端，而且网上有单张照片和多张照片上传的demo，下边介绍的是样式问题，现在手机流行的是微信类似的，点击加号添加照片，然后加号后移，继续点击加号添加照片，仿照的是weui里边的样式，这里做一个总结
html代码

<div id="uploader-demo">
    <div id="fileList" class="uploader-list fl" style="position:relative">
      <div id="filePicker" class="weui_uploader_input_wrp mt5"></div>
    </div>
  </div>

js代码

// 初始化Web Uploader
var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    fileNumLimit:9,
    formData: {
        'style': 'project_new',
        'path' :
        'city' :
    },

    // swf文件路径
    //swf: BASE_URL + '/js/Uploader.swf',

    // 文件接收服务端。
    server: '',

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

    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '+ file.id + '" class="file-item thumbnail">' +
                '' +
                '' + file.name + '' +
            '

'

            ),

        $img = $li.find('img');

    // $list为容器jQuery实例

    $("#filePicker").before( $li );

   // console.log($("#img"));

    

    // 创建缩略图

    // 如果为非图片文件，可以不用调用此方法。

    // thumbnailWidth x thumbnailHeight 为 100 x 100

    uploader.makeThumb( file, function( error, src ) {

        if ( error ) {

            $img.replaceWith('不能预览');

            return;

        }

        $img.attr( 'src', src );

    }, 100, 100 );

});

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

    var $li = $( "#fileList" ),

        $percent = $li.find('.progress span');

    // 避免重复创建

    if ( !$percent.length ) {

        $percent = $('

')

                .appendTo( $li )

                .find('span');

    }

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

   //$("#fileList")

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

uploader.on( 'uploadSuccess', function( file,data ) {

    $( "#fileList" ).addClass('upload-state-done');

    $('#fileList').appendTo("+data._raw+" name='project_new[url_list][]'>")

});

// 文件上传失败，显示上传出错。

uploader.on( 'uploadError', function( file ) {

    var $li = $( "#fileList" ),

        $error = $li.find('i.weui_icon_warn');

    // 避免重复创建

    if ( !$error.length ) {

        $error = $('').appendTo( $li );

    }

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

});

// 完成上传完了，成功或者失败，先删除进度条。

uploader.on( 'uploadComplete', function( file ) {

    $( "#fileList" ).find('.progress').remove();

});

})