百度圖片上傳插件【webuploader】

插件功能

　　|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參數為