天天看點

webuploader多圖檔上傳php,webuploader 圖檔上傳,單圖上傳,多圖上傳 傳回值接收等功能實作...

//上傳圖檔/單圖

html代碼片段

Js代碼

$list = $("#fileList"),//圖檔容器div

$btn = $("#btn-star"),//上傳圖檔按鈕

state = "pending",

uploader;

var uploader = WebUploader.create({

auto: true, //這裡設定是否自動上傳

swf: '__STATIC__/lib/webuploader/0.1.5/Uploader.swf',

// 檔案接收服務端。

server: '__MODULE__/Api/uploadImage',//圖檔接收位址

// 選擇檔案的按鈕。可選。

// 内部根據目前運作是建立,可能是input元素,也可能是flash.

pick: '#filePicker',

// 不壓縮image, 預設如果是jpeg,檔案上傳前會壓縮一把再上傳!

resize: false,

// 隻允許選擇圖檔檔案。

accept: {

title: 'Images',

extensions: 'gif,jpg,jpeg,bmp,png',

mimeTypes: 'image

uploader.on('ready', function() {

window.uploader = uploader;

});

// 檔案上傳成功,接收傳回值response,并設定隐藏域記錄圖檔資訊。

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

$("#images_load").append('' );

});

//通用代碼省略

})( jQuery );

前端效果

webuploader多圖檔上傳php,webuploader 圖檔上傳,單圖上傳,多圖上傳 傳回值接收等功能實作...

注意項:

接收圖檔傳回值,反正我的操作就是上傳成功的時候添加一條隐藏域,用于儲存圖檔資訊,單圖就是img,多圖就是img[]。