首页
登录 | 注册

jquery上传图片功能

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

  1. <div id="uploader-demo">
  2.     <div id="fileList" class="uploader-list fl" style="position:relative">
  3.       <div id="filePicker" class="weui_uploader_input_wrp mt5"></div>
  4.     </div>
  5.   </div>
js代码

  1. // 初始化Web Uploader
  2. var uploader = WebUploader.create({
  3.     // 选完文件后,是否自动上传。
  4.     auto: true,
  5.     fileNumLimit:9,
  6.     formData: {
  7.         'style': 'project_new',
  8.         'path' :
  9.         'city' :
  10.     },

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

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

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

  18.     // 只允许选择图片文件。
  19.     accept: {
  20.         title: 'Images',
  21.         extensions: 'gif,jpg,jpeg,bmp,png',
  22.         mimeTypes: 'image/*'
  23.     }
  24. });
  25. // 当有文件添加进来的时候
  26. uploader.on( 'fileQueued', function( file ) {
  27.     var $li = $(
  28.             '
    + file.id + '" class="file-item thumbnail">' +
  29.                 '' +
  30.                 '
    ' + file.name + '
    '
    +
  31.             '
'
  •             ),

  •         $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();
  • });
  • })

  • 相关文章

    • ExtJS结合WCF/Jquery结合WCF 分别开发的非常优秀的网页聊天工具,持续更新
      QQ技术交流群:159995692 /--------   临时开放的测试       帐号/密码:[88888888/1;666666/1]    ---------/         正如大家所知的ExtJs在Ajax效果方面的强大效果 ...
    • 随着非法广告的日益猖獗,每天在博客注册发广告的用户占了很大的比例,为了净化平台环境,即日起CU博客新注册用户需要先申请开通技术博客后,再通过个人实名认证即可使用写博客功能.此公告只对新注册用户有影响,老用户不受影响.有个别老用户,也有软文或 ...
    • 新版博文改进的一些功能
      一. 撰写区:     博文编辑器里面的操作项非常多,有些大家都是熟知的,我就不一一的介绍.主要给大家介绍一下,我们针对之前CU旧版博客做的一些改进.     1. 插入图片功能:CU旧版博客的图片仅限于图片链接的上传,经过新的改进,我们有 ...
    • windows下使用caddy加webdav插件实现网盘功能 Caddyfile配置文件内容如下: :8888 {   root F:\os_iso   timeouts none   gzip   # basicauth / user u ...
    • 我就不班门弄斧了.不过呢,有可能有些同学可能不知道Valgrind有哪些功能,那么我就从Valgrind的官方网站处,摘几段文字吧.MemcheckMemcheck detects memory-management problems, a ...
    • AIX默认Ksh很不习惯使用,登录后可用 set -o vi 命令, 这样就可以用vi的语法来编辑命令行.例如:若要调出历史执行过的命令,命令行模式下按下 Esc 键后,可通过 ESC+k 上一条命令 ESC+j 下一条命令 ESC++ 上 ...

    2020 unjeep.com webmaster#unjeep.com
    12 q. 0.013 s.
    京ICP备10005923号