前端常用插件使用文档 以及demo之上传文件 web uploader 常见

版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载。本博客作为笔记使用,正确性请自行验证。 https://blog.csdn.net/u014071104/article/details/47445415

文档:http://fex.baidu.com/webuploader/


html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="http://blog.csdn.net/xiaomogg/article/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="http://blog.csdn.net/xiaomogg/article/details/style.css" />
</head>
<body>


<div id="list"></div>   <!--空来放置已经加入上传队列的图片-->


<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>

<!--基于JQ-->
    <script type="text/javascript" src="http://blog.csdn.net/xiaomogg/article/details/jquery.js"></script>
    <script type="text/javascript" src="http://blog.csdn.net/xiaomogg/article/dist/webuploader.js"></script>
    <script type="text/javascript" src="http://blog.csdn.net/xiaomogg/article/details/upload.js"></script>
</body>
</html>



upload.js

//实例化一个对象

var uploader = WebUploader.create({
//开始配置

    // swf文件路径,IE6 7,会自动使用flash来上传
    swf: '../dist/Uploader.swf',



    // 文件接收服务端。
    server: '../server/fileupload.php',



    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.

    pick: {
        id:'#picker',
        multiple:false   //禁止多选,
    },


    // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
    resize: false
});


var $list=$("#list");
var abc;

//绑定事件,
uploader.on( 'fileQueued', function( file) {
    //生成缩略图
    uploader.makeThumb( file, function(error, src) {
         abc='<div id="' + file.id + '" class="item">' +
            '<img src='/228/xiaomogg/article/details/++ src+'"/>'+
            '<p class="state">等待上传...</p>' +
            '<div class="x">x</div>'+
            '</div>';


        $list.append(abc);//已加入队列的图片在html视图里面展示


        $(".item").on("click",".x",function(){      //点击html图片的外层,通过事件的对象来获取点击X,来删除队列指定的图片
  

            var attr=$(this).parent(".item").attr("id");  //获取要删除的图的ID,
            uploader.removeFile(file,attr);//删除指ID,这样我们就能再次上传这个图片了,这里也可以使用 uploader.getFile(attr)替换,因为他返回的也是file对象
            $(this).parent(".item").remove();
            console.log(uploader.getStats()); //能看到队列状态 ,队列里面的queueNum数量-1
        });
    });

    $("#ctlBtn").on("click",function(){  //点击按钮上传
        uploader.upload(file);
    });

});


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


        alert("success")
});

没有更多推荐了,返回首页

猿学习