webuploader 同一页面两个上传按钮解决办法

ゝ一纸荒年。 2021-06-26 16:06 917阅读 0赞

## 实现方法 ##

上传`div`设置`class=”filePicker”`，添加方法`addWebuploadCurrent`（回调值`input`的`id`）；

## `html`部分 ##

<div class="col-sm-5 col-xs-9">
        <p>请上照片</p>
        <div class="child-img">
            <img src="__PUBLIC__/lfey/images/child.png" id="preview_img1">
        </div>
        <div class="filePicker" οnclick="addWebuploadCurrent('child_pic')">上传</div>
        <input type="hidden" name="child_pic" id="child_pic">
    </div>

<div class="col-sm-5 col-xs-9">
        <div class="filePicker" οnclick="addWebuploadCurrent('residence_photo')">上传</div>
        <input type="hidden" name="residence_photo" id="residence_photo">
        <img src="" id="residence_photo_preview" style="width: 200px;">
    </div>

js部分

<script type="text/javascript"> var BASE_URL = '__PUBLIC__/2016dean/webuploader'; var APP = '__APP__/Index/upload_pic'; function addWebuploadCurrent(id) { $(".webupload_current").removeClass("webupload_current"); $("#"+id).addClass("webupload_current"); } </script>

<script type="text/javascript"> // 图片上传 jQuery(function() { var $ = jQuery, ratio = window.devicePixelRatio || 1, thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, uploader; uploader = WebUploader.create({ fileNumLimit:10, auto: true, swf: BASE_URL + '/Uploader.swf', server: APP, pick: '.filePicker', accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png' } }); uploader.on('fileQueued', function (file) { $(".webupload_current").before('<label>正在上传，请稍等...</label>'); }); uploader.on( 'uploadSuccess', function( file, data) { $("#" + file.id).remove(); $(".webupload_current").prev().remove(); $(".webupload_current").val(data._raw); if($(".webupload_current").attr("id") == 'residence_photo'){ $("#residence_photo_preview").attr('src',data._raw); }else{ $('#preview_img1').attr('src',data._raw); } }); uploader.addButton({ id: '#filePicker1' }); }); </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，917人围观）

还没有评论，来说两句吧...

相关阅读

相关解决同一页面中两个iframe互相调用jquery,js函数

[https://www.cnblogs.com/edisoner/p/6118368.html][https_www.cnblogs.com_edisoner_p_61183

朱雀/ 2023年07月13日 13:38/ 0 赞/ 132 阅读

相关使用webuploader上传文件

准备工作：添加需要的文件和页面 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

末蓝、/ 2022年10月13日 12:52/ 0 赞/ 253 阅读

相关 (一) asp.net WebUploader 上传

系统环境：windows 7 应用服务器：IIS7.0 编译器：visual Studio 2013 webuploader 下载地址：[http://fex.ba

我不是女神ヾ/ 2022年09月22日 11:56/ 0 赞/ 199 阅读

相关解决WebUploader 上传按钮按F12 才行的问题

解决WebUploader 上传按钮按F12 才行的问题参考文章： [（1）解决WebUploader 上传按钮按F12 才行的问题][1_WebUploader _F1

朱雀/ 2022年08月28日 07:59/ 0 赞/ 158 阅读

相关百度上传webuploader

一.注意细节 1.不能重复上传问题？根据查看webuploader文档里面有个duplicate属性，是可选的， true为可重复，false为不可重复默认为und

不念不忘少年蓝@/ 2021年09月12日 07:06/ 0 赞/ 559 阅读

相关 webuploader 设置上传数量

function onpost_Echo_ndkh2(serverURL,fileType,pickerID,listName,doneback,type){//上传路

水深无声/ 2021年07月26日 02:01/ 0 赞/ 635 阅读

相关 WebUploader - 分片上传

在开发过程中遇到需要上传大文件的需求，但是大文件整个上传会导致服务器内存爆炸。分片上传的思路利用[`blob.slice()`][blob.slice]方法，根据指

朱雀/ 2021年07月05日 01:12/ 0 赞/ 628 阅读

相关 webuploader 同一页面两个上传按钮解决办法

实现方法上传`div`设置`class=”filePicker”`，添加方法`addWebuploadCurrent`（回调值`input`的`id`）； `htm

ゝ一纸荒年。/ 2021年06月26日 16:06/ 0 赞/ 918 阅读

相关 webuploader的一个页面多个上传按钮实例

![在这里插入图片描述][20191001224827571.png] 借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi

╰半夏微凉°/ 2021年06月26日 16:06/ 0 赞/ 812 阅读

相关 webuploader多个实例上传（按两个来）

![20191007092417778.png][] <script src="~/Scripts/jquery-1.9.1.min.js"></script>

﹏ヽ暗。殇╰゛Y/ 2021年06月26日 16:06/ 0 赞/ 475 阅读