//上傳圖檔/單圖
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 );
前端效果
注意項:
接收圖檔傳回值,反正我的操作就是上傳成功的時候添加一條隐藏域,用于儲存圖檔資訊,單圖就是img,多圖就是img[]。