基于think3.2,webuploader的七牛直接多图上传的思路。

最新推荐文章于 2021-11-14 20:23:38 发布

蒙太奇葩

最新推荐文章于 2021-11-14 20:23:38 发布

阅读量3.6k

点赞数 2

分类专栏： About--PHP 文章标签： php 七牛编辑器 webuploade

本文链接：https://blog.csdn.net/lisimin52043/article/details/50827747

版权

分享一个基于webuploader的七牛多图上传的JS。

七牛要求的token与key我最后写。（PHP的，其他语言的自行翻文档）

话不多说，直接贴代码：articel.js

/**
 * Created by Administrator on 2016/3/7.
 */
$(function () {
   
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: "/Public/Extend/webuploader/Uploader.swf",

        // 文件接收服务端。(直接使用七牛)
        server: "http://up.qiniu.com",//$("#hidUrl").val(),

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id:"#content_img",
            lable:"<input type='button' class='btn' />",
            multiple:true
        },

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    uploader.on( 'uploadSuccess', function(file,response  ) {
   

        //var id=$("#hidBtn").val();
        if(response.key){
            //alert(1);
            $("input[name='bg_img']").val($("#hidUrl").val()+"/"+response.key);
            var a_tag="<a title='点击查看' target='_blank' href='"+$("#hidUrl").val()+"/"+response.key+"'>上传成功</a>";
            $("#tips").html(a_tag);
            console.log($("#hidUrl").val()+"/"+response.key);
            console.log("-");
        }
        //重置uploader，开启此选项后
        //uploader.reset();
    });

    //生成多个token,file,此函数在多文件上传的时候只会被调用一次
    uploader.on('filesQueued',function(files ){