百度图片上传插件webuploader

Posted 2020-09-21 李大白

插件功能

　　|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：图片上传到后台接口
formData：后台可能需要某些参数

formData: {
	"user_id": "$!user.id",
}

当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress,uploadSuccess, uploadError, uploadComplete事件。

//上传成功后台相应的数据
onUploadSuccess = function(e,s) {
	//路径
	console.log(s.image_name)
	$(\'#webup_img\').attr(\'src\',\'$!webPath/\'+s.image_name)
}

返回e，s两个参数

s参数为