webuploader上传多实例,一个页面多个上传按钮

一个项目中用到了 webuploader ,页面中需要一个页面多个实例,经过查看多种方法得出以下结论

在页面按钮处添加一个公用的类 filePicker,然后 onclick 写一个方法,

class="filePicker" onclick="addWebuploadCurrent('banners')"

当触发时给input一个类

    function addWebuploadCurrent(id) {
        //如果这个类存在先删除掉
      $(".webupload_current").removeClass("webupload_current");
         //查到input的id 给它添加webupload_current
      $("#"+id).addClass("webupload_current");
    }

uploader处配置方法

  pick: '.filePicker',

uploader.on 监听上传成功后获取上传文件地址

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function (file, response) {
     
      $("#" + file.id).remove();
      $(".webupload_current").val(response.name);

    });

以下为全部实例

<link rel="stylesheet" type="text/css" href="/Public/lib/webuploader/0.1.5/webuploader.css">
 
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span
        class="c-gray en">&gt;</span> 添加微名片 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                               href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<article class="page-container">
 
 
 
    <form action="" method="post" class="form form-horizontal" id="form-member-add">
      <input type="hidden" name="id" value="<{$rs.id}>">
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>背景图：</label>
        <div class="formControls col-xs-8 col-sm-9 upload">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="banners" name="banner" value="<{$rs.banner}>">
 
          <a href="javascript:void(1)" onclick="parent_layer('图片列表','<{:U('file/browseFile','stype=picture')}>')" class="btn btn-primary radius mr-5">选择站内图片</a>
          <a  class="filePicker" onclick="addWebuploadCurrent('banners')" >本地上传</a>
          <div id="fileList1" class="uploader-list"></div>
          留空使用模板自带背景图，建议上传640*1136，格式为jpg、png且不超过1M的图片</div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text" datatype="*2-20" nullmsg="请填写姓名" errormsg="姓名为2-20个字符" placeholder="" id="title" name="name" value="<{$rs.name}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">简介：</label>
        <div class="formControls col-xs-4 col-sm-9"  >
                <textarea class="textarea" name="jianjie" style="width:260px;" >
                    <{$rs.jianjie}>
                </textarea>
        </div>
      </div>
 
      <div class="row cl " id="upload">
 
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>头像：</label>
        <div class="formControls col-xs-8 col-sm-9 upload"  >
          <input type="text" style="width:260px;"  class="input-text" id="picsrc" value="<{$rs.image}>" datatype="*2-70" nullmsg="头像地址不能为空" errormsg="头像地址为2-70个字符" placeholder="" name="image">
 
          <a href="javascript:void(1)" onclick="parent_layer('图片列表','<{:U('file/browseFile','stype=picture')}>')" class="btn btn-primary radius mr-5">选择站内图片</a>
          <a  class="filePicker" onclick="addWebuploadCurrent('picsrc')">本地上传</a><div id="fileList" class="uploader-list"></div>
 
        </div>
      </div>
 
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">视频地址：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="video" name="video" value="<{$rs.video}>">
          例如优酷视频：http://player.youku.com/embed/XNzE4NDIzNjE2
        </div>
 
      </div>
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">音乐地址：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="mp3" name="mp3" value="<{$rs.mp3}>">
          例如：http://cmp3.qiniudn.com/Uploadfile/file/2014/06/23/1403504283_53a7c69bc9d48.mp3</td>
        </div>
 
      </div>
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">电话：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="tel" name="tel" value="<{$rs.tel}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">传真：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="cz" name="cz" value="<{$rs.cz}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">电话：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="tel" name="tel" value="<{$rs.tel}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">手机：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="mobile" name="mobile" value="<{$rs.mobile}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">部门职位：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="work" name="work" value="<{$rs.work}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">邮箱：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="email" name="email" value="<{$rs.email}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">QQ：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="qq" name="qq" value="<{$rs.qq}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">微信：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="weixin" name="weixin" value="<{$rs.weixin}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">网址：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="web" name="web" value="<{$rs.web}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">邮编：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="yb" name="yb" value="<{$rs.yb}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">公司名称：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="gs" name="gs" value="<{$rs.gs}>">
        </div>
 
      </div>
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">地址：</label>
        <div class="formControls col-xs-8 col-sm-9">
          <input type="text" style="width:260px;"  class="input-text"  placeholder="" id="dz" name="dz" value="<{$rs.dz}>">
        </div>
 
      </div>
 
 
      <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">经纬度：</label>
        <div class="formControls col-xs-8 col-sm-9">
          经度 <input type="text" id="longitude"  name="longitude" size="14" class="input-text" style="width:60px;" value="<{$rs.longitude}>" /> 纬度 <input type="text"  name="latitude" style="width:60px;" size="14" id="latitude" class="input-text" value="<{$rs.latitude}>" /> <a href="###" class="ChooseImage" onclick="setlatlng($('#longitude').val(),$('#latitude').val())">在地图中查看/设置</a>
        </div>
 
      </div>
      <div class="row cl">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
          <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
        </div>
      </div>
      </form>
 
</article>
 
<include file="Public:footer"/>
<script>
  function setlatlng(longitude,latitude){
 
  layer_show('地图坐标',"<{:U('Map')}>",800,500);
 
  }
</script>
<script type="text/javascript" src="/Public/lib/webuploader/0.1.5/webuploader.js"></script>
 
 
<script>
 
 
    //上传图片
    // 初始化Web Uploader
    var uploader = WebUploader.create({
 
      // 选完文件后，是否自动上传。
      auto: true,
 
      // swf文件路径
      swf: '/Public/lib/webuploader/0.1.5/Uploader.swf',
 
      // 文件接收服务端。
      server: '<{:U('uploads')}>',
 
      // 选择文件的按钮。可选。
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '.filePicker',
 
      // 只允许选择图片文件。
      accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
      },
      formData: {
        code: 'identity'
      }
    });
 
    // 当有文件添加进来的时候
    uploader.on('fileQueued', function (file) {
      var $list = $("#fileList"),
              $li = $(
                      '<div id="' + file.id + '" class="file-item thumbnail">' +
                      '<img>' +
                      '<div class="info">' + file.name + '</div>' +
                      '</div>'
              ),
              $img = $li.find('img');
 
 
      // $list为容器jQuery实例
      $list.append($li);
 
      // 创建缩略图
      // 如果为非图片文件，可以不用调用此方法。
      // thumbnailWidth x thumbnailHeight 为 100 x 100
      uploader.makeThumb(file, function (error, src) {
        if (error) {
          $img.replaceWith('<span>不能预览</span>');
          return;
        }
 
        $img.attr('src', src);
      }, 100, 100);
    });
 
    uploader.addButton({
      id: '#filePicker1'
    });
 
    // 文件上传过程中创建进度条实时显示。
    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) {
     // $('#piclist').val(response.name);
      $("#" + file.id).remove();
      $(".webupload_current").val(response.name);
 
      //$('#' + 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 addWebuploadCurrent(id) {
 
      $(".webupload_current").removeClass("webupload_current");
      $("#"+id).addClass("webupload_current");
    }
</script>

转过过来后html被解析故浏览有障碍已经修复

原创文章，作者：键盘游走者，如若转载，请注明出处：https://www.708034.com/2016/11/webuploader%e4%b8%8a%e4%bc%a0%e5%a4%9a%e5%ae%9e%e4%be%8b%e4%b8%80%e4%b8%aa%e9%a1%b5%e9%9d%a2%e5%a4%9a%e4%b8%aa%e4%b8%8a%e4%bc%a0%e6%8c%89%e9%92%ae/

webuploader上传多实例,一个页面多个上传按钮

向键盘游走者进行回复取消回复

评论列表（2条）

webuploader上传多实例,一个页面多个上传按钮

相关推荐

向键盘游走者进行回复 取消回复

评论列表（2条）

向键盘游走者进行回复取消回复