码迷,mamicode.com
首页 > Web开发 > 详细

百度图片上传插件【webuploader】

时间:2017-06-03 12:43:21      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:styles   根据   服务   ref   信息   base   ima   script   参数   

插件功能

  |webuploader

    |文件上传

    |图片上传

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

引入资源

使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
<!--SWF在初始化的时候指定,在后面将展示-->

SWF:flash插件

技术分享

文件上传

图片上传

demo包含了文件过滤,图片预览,图片压缩上传等功能。

html:

首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。

<!--dom结构部分-->
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>

Javascript

// 初始化Web Uploader
var uploader = WebUploader.create({

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

    // swf文件路径
    swf: BASE_URL + ‘/js/Uploader.swf‘,

    // 文件接收服务端。
    server: ‘http://webuploader.duapp.com/server/fileupload.php‘,

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

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

参数说明:

swf:flash插件路径,需要放到项目文件夹中
server:图片上传到后台接口

 

百度图片上传插件【webuploader】

标签:styles   根据   服务   ref   信息   base   ima   script   参数   

原文地址:http://www.cnblogs.com/Abner5/p/6936729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!