如果要挖井,就要挖到水出为止 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

webUploader实现一个页面调用多个上传实例 多个上传按钮 对应到多个表单值

前端设计 memory 发布于February 27, 2018 标签: JavaScript

需求样式

现在需要在同一个页面中,有多个类似于这样的表单,每个表单对应一个上传按钮。上传完后,将返回的值传入到对应的表单中。

直接贴代码

/* --上传组件开始-- */
var uploader = WebUploader.create({
    // 选完文件后,是否自动上传。
    auto: true,
    // swf文件路径
    swf:  STATIC_URL + 'webuploader/Uploader.swf',
    server: WWW_URL + 'public/upload?type=images',
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: '.uploadImg',
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    resize:false
});

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

// 文件上传失败,显示上传出错。
uploader.on('uploadError', function (file) {
    alert('上传失败');
});

// 完成上传完了,成功或者失败,先删除进度条。
uploader.on('uploadComplete', function (file) {
    $(".webUpload").removeClass("webUpload");
});

function webUpload(id) {
    $("#"+id).addClass("webUpload");
}

html中调用的方法

<table>
  <tr>
    <td><input type="text" id="thumb"/></td>
    <td><span onClick="webUpload('thumb')"></span></td>
  </tr>
  <tr>
    <td><input type="text" id="logo"/></td>
    <td><span onClick="webUpload('logo')"></span></td>
  </tr>
  <tr>
    <td><input type="text" id="lvtao"/></td>
    <td><span onClick="webUpload('lvtao')"></span></td>
  </tr>
</table>

相关推荐

添加新评论

全部评论:已有 2 条评论

  1. 111

    动态添加按钮怎么添加,pick:class名是那个能在具体一点吗,能发一个详细的代码吗?

    1. memory

      动态添加没有试过,可能需要绑定事件了

网站状态

  • 栏目分类:49个
  • 发布文章:1554篇
  • 用户评论:838条
  • 开博至今:4370天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • 楚狂人博客: 感谢博主分享干货
  • 天津网站建设: 写的很棒,感谢博主
  • 醉八虫医用冷敷贴: 支持下博主
  • 有意思吧: 既然来了,就踩一下,
  • 小云: 不错
  • tper: 你列子中按分类归档的图片,每个分类下面显示分类下的文章的代码是怎...
  • 小云: 写的很不错
  • 女装品牌: 文章不错支持一下
  • memory: 升级之后不能访问是密码套件的事儿。其实可以配置好一个写公共文件引...
  • 欧文斯: 很奇怪,都升级之后 443 SSL 加密不能访问,其他端口却可以
  • 子午书屋: 好久没使用memcache了
  • 小云: 写的不错,谢谢分享
  • yiye: 楼主你好,不知道我回复的邮件您看到没?我下载的JPress不是最...
  • memory: 海哥最近更新的新版的我还没有测试过。具体原因还不清楚。不过你可能...
  • yiye: 楼主,我下的是最新的官方mysql镜像,然后密码用户名都正确,数...
  • memory: 这个是15年的文章了,这几年不知道有没有变化 。 你可以根据错误...
  • nice: 请教下这个评论审核提示代码是直接在评论模板调用的吗,我直接用了...