webuploader上传多张照片的基本功能

[html]

<script type="text/javascript" src="http://fex.baidu.com/webuploader/js/jquery-1.10.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://fex.baidu.com/webuploader/css/webuploader.css">
<script type="text/javascript" src="http://fex.baidu.com/webuploader/js/webuploader.js"></script>

// 当有文件添加进来的时候
          uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。
               var $li = $(
                      '<div id="' + file.id + '" class="file-item thumbnail" style="float:left">' +
                        '<img>' +
                        '<span title="删除" class="selfmedia_addtemplate_imgDelSpan remove-this" id="span_'+file.id+'" div_id="' + file.id + '">X</span>'+
                          //'<div class="info">' + file.name + '</div>' +
                      '</div>'
                   ),
           $img = $li.find('img');

             $list.append( $li );     // $list为容器jQuery实例

//删除操作
             $li.on('click', '.remove-this', function() {
                uploader.removeFile( file, true );   //移除某一文件, 默认只会标记文件状态为已取消，如果第二个参数为 true 则会从 queue 中移除。

                helperuser_publish_delWeiToutiaoPicture(this, file.id);
           });

           /** 创建缩略图如果为非图片文件，可以不用调用此方法。
               thumbnailWidth x thumbnailHeight 为 100 x 100 */
           uploader.makeThumb( file, function( error, src ) {   //webuploader方法
               if ( error ) {
                   $img.replaceWith('<span>不能预览</span>');
                   return;
               }

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

//点击上传操作
          /*$btn.on( 'click', function() {
              //$('#photopicker').refresh();   //刷新选择框，继续选图片
            console.log("上传...");
            uploader.upload();
            console.log("上传结束...");
          }); */

       // 文件上传成功，给item添加成功class, 用样式标记上传成功。
       uploader.on( 'uploadSuccess', function( file, response ) {
           weitoutiaoPhotoId.push(response.data);//累加微头条的图片ID
           var successLi = $('#'+file.id);
           var success = successLi.find('div.success');
           if(!success.length){
               success = $('<div class="success"></div>').appendTo(successLi);
           }
           success.html('<span style="font-size: 12px;color:green">上传成功</span>');
           $('<div id='+file.id+'></div>').appendTo(success);

//找到 × 给 × 的data属性赋值，用于删除数组中的文件ID
           var chaSpan = $('#span_'+file.id);   //找到span元素赋data属性
           chaSpan.attr('data', response.data);   //给span加上data属性
       });

       // 文件上传失败，显示上传出错。
       uploader.on( 'uploadError', function( file ) {
           var errorLi = $('#'+file.id);
           var error = errorLi.find('div.success');
           if(!error.length){
               error = $('<div class="success"></div>').appendTo(errorLi);
           }
           error.html('<span style="font-size: 12px;color:red">上传失败</span>');
           $('<div id='+file.id+'></div>').appendTo(error);
       });

   });

/**
   * @todo删除图片操作
   * @param obj span × 按钮对象
   * @param file_id 整张图片的ID
   */
   function helperuser_publish_delWeiToutiaoPicture(obj, file_id){
       var photo_id = $(obj).attr('data');
       $('#'+file_id).remove();   //移除整张图片样式

       weitoutiaoPhotoId.splice($.inArray(photo_id,weitoutiaoPhotoId),1);   //删除数组的该文件ID
   }

</script>
</body>
</html>

[结果]
上传成功返回的json为：
{"status":"success","message":"\u4e0a\u4f20\u6210\u529f\uff01","data":"8756"}

webuploader上传多张照片的基本功能相关推荐

Android 拍照以及相册中选择(适配高版本)————上传多张照片之压缩处理、在线预览可伸缩放大(二)
______ Introduction ______ 前言上一篇文章刚给大家总结完,关于上传头像的功能.此文章所述主要是关于上传头像的具体流程以及如何对照片做裁剪处理,回调给控件显示:当然重中之重 ...
webuploader上传文件，后台Java接收
前台html页面: <!DOCTYPE html> <html> <head> <title>Insert title here</title&g ...
php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
java 上传图片后没法立马显示出来_SpringMVC多个文件上传及上传后立即显示图片功能...
多文件上传就是改良一个方法把MultipartFile类换成CommonsMultipartFile类,因为上传多个文件用数组方式的话MultipartFile类不能初始化,它不支持数组 packag ...
Vue使用WebUploader上传文件/压缩包
Vue使用WebUploader上传文件/压缩包 npm i webuploader -S 引入 //引入webuploader import WebUploader from "webup ...
iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
jsp使用七牛云API和webuploader上传多组图片
文章目录 jsp使用七牛云API和webuploader上传多组图片介绍目录树遇到的问题上传组件的选择问题进度条多线程前端界面数据库关键代码 UserPhotoDaoImpl Upl ...
webuploader上传问题
1.webuploader上传按钮点了没反应查看组建中input的热点大小,此次问题为:width:1:height:1px: 2.webuploader上传,弹出文件窗口速度过慢修改写法: mi ...
使用webuploader上传大文件
遇到一个需求,用户想上传超过1.2G的视频文件. 根据这个需求做了一些上传速度对比,ftp上传1G多点的文件用时三分钟左右 1.使用ftp上传 (1) 创建ftp服务站点在服务器上依次选择控制面板- ...
layui图片上传增加删除图标以及功能
layui图片上传组件是没有删除功能的,这里自己增加删除功能: //删除图标var imgX = document.createElement("img"); imgX.src = ...

webuploader上传多张照片的基本功能

webuploader上传多张照片的基本功能

webuploader上传多张照片的基本功能相关推荐

最新文章

热门文章