简单使用webupload

简单使用webupload

 

简单使用webupload

官网地址：http://fex.baidu.com/webuploader/

引入必要文件

有些地方可能会用到jQuery，建议也引用进来

<!-- CSS文件 -->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--js引入文件-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

body区域

  <!-- Dom容器 -->
<div id="uploader-demo">
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker" >选择图片</div>
</div>

JavaScript

<script type="text/javascript">

// 初始化Web Uploader
var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf: '/admin/lib/webuploader/0.1.5/Uploader.swf',

    // 文件接收服务端。
    server: '{{route('upload')}}',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: {
        id:'#filePicker',
        //是否开启多个文件选择能力
        multiple:false,
    },

    //文件上传时携带参数
    formData: {
         _token:'{{csrf_token()}}'
    },

    //文件上传时的表单名称
    fileVal:'img',

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

//上传成功时的回调方法
uploader.on('uploadSuccess',function (file,res) {
    var src = res.url;
    $('#inputImg').val(src)
    $('#img').attr('src',src)
})

 

标签: webupload