之前在时候用到webuploader ,起初是支持单实例,后来要求支持多实例.

webuploder API网址,如果不懂我说的可以去查看http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_addButton

addButton

  • addButton( pick ) ⇒ Promise

添加文件选择按钮,如果一个按钮不够,需要调用此方法来添加。参数跟options.pick一致。

uploader.addButton({
id: '#btnContainer',
innerHTML: '选择文件'
});

下面是个人实例:

1.首先是页面

 

< = = =>
< =

  • =
  • = = = = =  =>
    >
    >
     = =></>
     =>
     = =>
     =>
    > = = > > = =
  • = =   = = = =   = =
  • = =
  • >
    >
    >
    >
     = =></>
    > == = =>>>
    >
    >
    >>
    >
     =
  • =>
     =>< =>>
    >
    >
     =>
     = =
  • = = = =
  • = =>
     = ==></>
  • ==>>
     = = =>
    >
    >
  • >
    >
    >
    >
    >
    >
    >>
    > = = = ="evalution({{=ord.odetId}},{{=ord.prod_id}})"="per_evaluate_btn upload_btn" = >
    >
    >
    >
    >
    </>
    </>

我们用的模板是doT.js来遍历集合  当然也有很多其他方式 比如说最近见到 用easyui框架 也可以显示列表

2. JavaScript

 

var;

  • evacom = 1;
  • fileNumLimit = 10000;
  • multiple = ;
  • imgtype = ;
  • punit = ;
  • (oldImgUrl != ) {
  • getImgByJson(oldImgUrl);
  • () {
  • FormValidation.init();
  • bigImg(id) {
  • deal(id) {
  • evacom = id;
  • + evacom);
  • }
  • amy_evaluate() {
  • $().css(, );
  • evaluate_off() {
  • ).css(, );
  • //
     showOrNo(ids) {
  • Imgmap =  Map();
  • + ids).raty({
  • width : 300
  • itid =  + ids;
  • (i, item) {
  • (ids != item.id) {
  • ,
  • multiple :
  • Map();
  • + evacom, Imgmap);
  • $list = $( + evacom);
  • (Imgmothermap == ) {
  • evacom = ids;
  • ,
  • multiple :
  • bloc =  + ids;
  • $(bloc).toggle();
  • }

3. Upload上传 Java关键代码

 

@RequestMapping, method = RequestMethod.POST)

  • getImgurlbyfile(HttpServletResponse response,
  • maxSize = ;
  • JSONObject();
  • String imgtype = request.getParameter();
  • );
  • ;
  • (Tools.isEmpty(imgtype)) {
  • , );
  • json.put(,
  • ));
  • }  {
  • (getBoolByType(myfile.getOriginalFilename().toLowerCase())) {
  • (myfile.getSize() <= maxSize) {
  • ( != myfile && !myfile.isEmpty()) {
  • (imgtype) {
  • :
  • filePath = Tools.uploadpicByShow(myfile, imgtype,
  • , , , , );
  • json.put(, );
  • , );
  • json.put(, filePath);
  • ;
  • :
  • );
  • , );
  • json.put(, );
  • , filePath);
  • ;
  • :
  • filePath = Tools.uploadpic(myfile, imgtype);
  • , );
  • json.put(, );
  • , filePath);
  • ;
  • {
  • , );
  • json.put(, BaseConfig.MESSAGE
  • ));
  • }
  • {
  • json.put(, );
  • ,
  • BaseConfig.MESSAGE.get());
  • {
  • , );
  • json.put(,
  • ));
  • }
  • {
  • (UnsupportedEncodingException e) {
  • e.printStackTrace();
  • }

webupload.js

 

$list = $();

  • count=0;
  • var Map();
  • thumbnailWidth = 100;
  • var
  • ,
  • fileVal : ,
  • ,
  • duplicate : ,
  • server : SHOPDOMAIN+ ,
  • ,
  • ,
  • ,
  • mimeTypes :
  • });
  • // 当有文件添加进来的时候
    'fileQueued'function
     $li = $(
  • + ), $img = $li
  • );
  • $btns = $(
  • , () {

  • $( + file.id).stop()
  • //      .animate({
    //          height : 30
    //      });

    , () {

  • + file.id).stop()
  • //          height : 0
    //      });

    , , () {

  • index = $().index(), deg;
  • (index) {
  • 0:
  • ;
  • 1:
  • $nextId=$(+file.id).next();
  • (undefined!=$nextId.attr()){
  • tempSrc=Imgmap.get($nextId.attr());
  • tempWu_File=$(+file.id);
  • Imgmap.put($nextId.attr(), Imgmap.get(file.id));
  • + file.id).stop().animate({
  • height : 0
  • ).html(Imgmap.toString());
  • ;
  • 2:
  • $prevId=$(+file.id).prev();
  • (undefined!=$prevId.attr()){
  • tempSrc=Imgmap.get($prevId.attr());
  • tempWu_File=$(+file.id);
  • ), Imgmap.get(file.id));
  • Imgmap.put(file.id, tempSrc);
  • + file.id).stop().animate({
  • ).html(Imgmap.toString());
  • }
  • ;
  • }
  • $list.append($li);
  • (error, src) {
  • (error) {
  • );
  • ;
  • , src);
  • }, thumbnailWidth, thumbnailHeight);
  • // 文件上传过程中创建进度条实时显示。
    'uploadProgress'(file, percentage) {
  • $li = $( + file.id), $percent = $li.find();
  • (!$percent.length) {
  • $percent = $(
    );
  • }
  • , percentage * 100 + );
  • // 文件上传成功,给item添加成功class, 用样式标记上传成功。
    'uploadSuccess'(file, response) {
  • ).css(,);
  • ).html(Imgmap.toString());
  • $( + file.id).addClass();
  • // 文件上传失败,显示上传出错。
    'uploadError'(file) {
  • $li = $( + file.id), $error = $li.find();
  • (!$error.length) {
  • $error = $(

    );

  • // 完成上传完了,成功或者失败,先删除进度条。
    'uploadComplete'(file) {
  • + file.id).find().remove();
  • });
  • // 完成上传完了,成功或者失败,先删除进度条。
    'error'(file) {
  • showMessage(file);
  • function
     tempImgPath = $().html();
  • (Imgmap.size()==0){
  • ).css(,);
  • }
  • ).html(Imgmap.toString());
  • $( + fileId).remove();
  • function

    ).css(,);

  • ( i=0; i<json.length; i++)
  • +json[i].id, json[i].uri);
  • $li = $(
    '_160''">'

    + ), $img = $li

  • );
  • $btns = $(
  • '">'

    , () {

  • tempId=$().attr();
  • $( + tempId).stop().animate({
  • , () {
  • tempId=$().attr();
  • + tempId).stop().animate({
  • height : 0
  • , , () {
  • tempId=$().parent().attr();
  • index = $().index(), deg;
  • (index) {
  • 0:
  • +tempId);
  • ;
  • 1:
  • $nextId=$(+tempId).next();
  • (undefined!=$nextId.attr()){
  • tempSrc=Imgmap.get($nextId.attr());
  • tempWu_File=$(+tempId);
  • Imgmap.put($nextId.attr(), Imgmap.get(+tempId));
  • +tempId, tempSrc);
  • $nextId.after(tempWu_File);
  • +tempId).stop().animate({
  • height : 0
  • ).html(Imgmap.toString());
  • ;
  • 2:
  • $prevId=$(+tempId).prev();
  • (undefined!=$prevId.attr()){
  • tempSrc=Imgmap.get($prevId.attr());
  • tempWu_File=$(+tempId);
  • ), Imgmap.get(+tempId));
  • Imgmap.put(+tempId, tempSrc);
  • +tempId).stop().animate({
  • ).html(Imgmap.toString());
  • }
  • ;
  • }
  • $list.append($li);
  • ).html(Imgmap.toString());
  • }

原理, 就是每次点击按钮的时候 对按钮进行绑定事件

 

addButton

  • addButton( pick ) ⇒ Promise
  • ,
  • });

每个按钮都有不同的id,所以说webuploader可以实例化多个按钮,这是重点,这样一个页面就支持多个评论了。

webuploader在同一个页面支持多个按钮实例的更多相关文章

  1. webuploader的一个页面多个上传按钮实例

    借鉴一位大佬的demo  附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览  直接上传图片后拿到回传地址给img标签显示图 ...

  2. [转] c# 模拟Asp.net页面中的某个按钮的点击,向web服务器发出请求

    在没有做题目中所述的内容的时候,感觉这应该是很简单的东西,但是当真正开始做的时候却发现,有很多问题现在在这里写出来,供和我一样水平不高的参考一下. 在写本文之前参照了一下文章 欢迎使用CSDN论坛阅读 ...

  3. 完美实现在同一个页面中使用不同样式的artDialog样式

    偶然发现artDialog.js这个插件,就被其优雅的设计及漂亮的效果深深吸引,在做例子时碰到了一些想当然它应该提供但却没有提供的功能,不过这都不影响我对它的喜爱,下面说一下遇到的问题吧! artDi ...

  4. iOS 实现单个页面支持横竖屏,其他页面只能竖屏

    最近在自己的项目里面 有需要做一个需求 : app中某一个页面支持横竖屏, 而其他页面只能竖屏. 1 2 实现方法如下: 1 首先需要Xcode中选中支持的屏幕方向  2 Appdelegate中 . ...

  5. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

  6. 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突

    - jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...

  7. asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

  8. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  9. 多个测试类 只使用同一个浏览器,同一个driver对象, 或者同一个页面的对象

    如果是:多个测试类 只使用同一个浏览器,同一个driver对象, 或者同一个页面的对象,只需要:1. 创建一个基本的测试类(BaseTest),具有一个公共静态的driver属性, public st ...

随机推荐

  1. Checking the content of the pointer

    https://social.msdn.microsoft.com/Forums/windowsdesktop/en-US/d481b7ec-cd67-476c-b2d7-ca3334effa16/h ...

  2. [C] zintrin.h : 智能引入intrinsic函数。支持VC、GCC,兼容Windows、Linux、Mac OS X

    博客来源:http://blog.csdn.net/zyl910/article/details/8100744 现在很多编译器支持intrinsic函数,这给编写SSE等SIMD代码带来了方便.但是 ...

  3. NOLOCK、HOLDLOCK、UPDLOCK、TABLOCK、TABLOCKX

    NOLOCK(不加锁) 此选项被选中时,SQL Server 在读取或修改数据时不加任何锁. 在这种情况下,用户有可能读取到未完成事务(Uncommited Transaction)或回滚(Roll ...

  4. max plugin wizard,project creation faild解法

    两点需要注意: 1,要将maxsdk的3dsmaxPluginWizard文件夹设为只读. 2,要将3dsmaxPluginWizard.vsz中的"Wizard="设置为正确的v ...

  5. Ackerman函数

    Ackerman函数在许多讲解递归的书中都提到,但似乎又对解题没有太大的意义,暂时不知道了.不过这个东西,是一个数学知识点,暂时收藏于此吧. 查了一下维基百科和百度百科,表面上两个定义不一样,仔细推敲 ...

  6. js事件源window.event.srcElement兼容性写法

    <html> <body> <p>一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 只要在外层上写一个 然后检查event.srcE ...

  7. 关于ttserver, mongodb, couchbase. ssdb ,tair, leveldb的一点使用体验

    2年前使用的ttserver,性能很高,支持分布式,但稳定性不足,当存储容量达到亿级的时间经常会出现无法插入的情况,而且不知道是什么原因造成的错误,重启后也无济于事,只好重启开新库. 单库写入性能 2 ...

  8. linux xargs参数

    xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处理.通常情况下,xargs从管道或者stdin中读取数据,但是它也能够从 ...

  9. Innodb 存储引擎(转)

    第一部分:线程 Innodb是一个多线程的,各个线程负责不同的任务.主要的线程有:Master Thread.IO Thread.Purge Thread.Page Cleaner Thread. 一 ...

  10. ASP.NET MVC 中实现View与Controller分离

    一.开篇题外话 我经常会在博客园逛来逛去,看过很多大牛们的Blog,我很少在这块技术天地活动,之前有发表过几篇日志,好像大部分是和电商有关,作为一个多年的开发人员,很少在这里分享,之前一直在CSDN上 ...