Git 项目推荐 | html5 异步批量上传插件

使用html5的ajax批量上传的工具 。

插件描述:

javascript异步上传插件,包含3个子项目BUpload, JUpload, TUpload.

  • BUpload : 基于HTML5, UI仿百度编辑器的图片上传, 支持图片上传,浏览图片,和图片搜索,支持图片预览,有进度条
  • TUpload : 基于HTML5, UI仿腾讯的QQ空间上传图片,支持图片预览,有进度条。
  • JUpload : 基于iframe的异步上传。

插件依赖:

  • jQuery-1.7.1以上版本

使用demo

BUpload

    $("#upload-btn").on("click", function() {

        new BUpload({
            upload_url : "upload.php",
            list_url : "image_list.php",    //图片列表数据获取url
            search_url : "image_search.php",    //图片搜索页面url
            max_filesize : 1024,
            max_filenum : 10,
            callback : function(data) {
                $.each(data, function(idx, item) {
                    $("#image-box").append('<img src="'+item+'" width="200" />');
                });
                console.log(data);
            }
        });

    });

TUpload

    $("#upload-btn").on("click", function() {

        new TUpload({
                uploadUrl : "upload.php",
                maxFileSize : 1024,
                maxFileNum : 20,
                callback : function(data) {
                    $.each(data, function(idx, item) {
                        $("#image-box").append('<img src="'+item+'" width="200" />');
                    });
                    console.log(data);
                }
            });

    });

JUpload

    $("#upload-btn").JUpload({
        url : "upload.php",
        src : "src",
        image_container : "image-box"
    });

    $("#upload-btn2").JUpload({
        url : "upload.php",
        src : "src",
        callback : function(data) {
            $("#img-src").val(data.message);
        }
    });

本文分享自微信公众号 - 码云Gitee(mayunOSC)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-06-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

292100
来自专栏搞前端的李蚊子

微信小程序web-view页面安卓下显示空白的解决办法!!!

web-view页面在你向地址拼接参数展示页面时,在安卓上有时会显示空白 解决方案: A: 普通不需要参数的话可以直接把地址写在src里,不要去在onLoad里...

56840
来自专栏雪地二货笔记库

vue学习笔记5-事件绑定-v-on

效果也相同。 而且vue也封装了好多方法,可以用这些方法简介开发 例如@keyup.enter="a",如果按下键盘的时候按下的是回车,那么就可以直接触发a方法...

13310
来自专栏自由而无用的灵魂的碎碎念

去掉windows8.1鸡肋的开始按钮

可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/8972885

11220
来自专栏前端人人

React技巧2(避免无意义的父节点)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React 技巧1(状态组件与无状态组件的使用) --...

39050
来自专栏Angular&服务

cordova扫描二维码

23330
来自专栏web编程技术分享

【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

42380
来自专栏微信小程序开发

小程序中滚动条的使用,wx.pageScrollTo和&lt;scroll-view&gt;的对比

知晓程序员,专注微信小程序开发的程序员! 前言:近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即wx.pageScrollTo滚动到page页面的指...

96570
来自专栏GreenLeaves

JavaScript之<script>标签简介

向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性。 1、async:可选...

219100
来自专栏计算机编程

SNS项目笔记<五>--content滚动の坑

13030

扫码关注云+社区

领取腾讯云代金券