1.引入一下js
<script type="text/javascript" src="tangram.js">
</script><script type="text/javascript" src="callbacks.js"></script>
/*-=-=-=-=-=-=-=全局变量模块-=-=-=-=-=-=-*/
var imageUrls = [], //从服务器返回的上传成功图片数组
imageCount = 0; //预览框中的图片数量,初始为0//flash初始化参数
var flashOptions = {
createOptions: {
id: 'flashUpload', //flash容器id
url: 'imageUploader.swf', //这个就是附件里面的FLASH
width: '720', //容器宽度
height: '272', //容器高度
errorMessage: 'Flash插件初始化错误,请更新您的flashplayer版本!',
wmode: 'window',
ver: '10.0.0', // 初始化的参数就是这些,
vars: {
width: 720, //width是flash的宽
height: 272, //height是flash的高
gridWidth: 115, // gridWidth是每一个预览图片所占的宽度,应该为width的整除
gridHeight: 120, // gridHeight是每一个预览图片所占的高度,应该为height的整除
picWidth: 100, // 单张预览图片的宽度
picHeight: 100, // 单张预览图片的高度
uploadDataFieldName: 'picdata', // POST请求中图片数据的key
picDescFieldName: 'pictitle', // POST请求中图片描述的key
maxSize: 2, // 文件的最大体积,单位M
compressSize: 1, // 上传前如果图片体积超过该值,会先压缩,单位M
maxNum: 32, // 最大上传多少个文件
backgroundUrl: '', //背景图片,留空默认
listBackgroundUrl: '', //预览图背景,留空默认
buttonUrl: '', //按钮背景,留空默认
compressSide: 1, //等比压缩的基准,0为按照最长边,1为按照宽度,2为按照高度
compressLength: 700, // 能接受的最大边长,超过该值Flash会自动等比压缩
url: 'up.php', // 上传处理页面的url地址
ext: '{"param1":"参数值1", "param2":"参数值2"}', //可向服务器提交的自定义参数列表
fileType: '{"description":"图片", "extension":"*.gif;*.jpeg;*.png;*.jpg"}' //上传文件格式限制 },
container: 'flashUploadContainer' //flash容器id,对应页面上面的DIV },
selectFileCallback: 'selectFileCallback', // 选择文件的回调
exceedFileCallback: 'exceedFileCallback', // 文件超出限制的最大体积时的回调
deleteFileCallback: 'deleteFileCallback', // 删除文件的回调
startUploadCallback: 'startUploadCallback', // 开始上传某个文件时的回调
uploadCompleteCallback: 'uploadCompleteCallback', // 某个文件上传完成的回调
uploadErrorCallback: function (data) {
if(!data.info){
alert(data.info);
}
}, // 某个文件上传失败的回调
allCompleteCallback: 'allCompleteCallback' // 全部上传完成时的回调
//changeFlashHeight: 'changeFlashHeight'
// 改变Flash的高度,mode==1的时候才有用}
var flashObj = new baidu.flash.imageUploader(flashOptions);
/** * 选择文件后的回调函数 * @param Array */
function selectFileCallback(selectFiles){
// 数组里单个元素为Object,{index:在多图上传的索引号, name:文件名, size:文件大小}
// 其中size单位为Byte console.log("选择了如下文件:");
var obj;
for(var i = 0, iLen = selectFiles.length; i < iLen; i++){
obj = selectFiles[i];
console.log(obj.index, obj.name, obj.size);
}
console.log("===================================");
}
/** * 文件大小超出时的回调函数 * @param Object */
function exceedFileCallback(file){
// 参数为Object,{index:在多图上传的索引号, name:文件名, size:文件大小}
// 其中size单位为Byte console.log("文件超出大小限制:");
console.log(file.index, file.name, file.size);
console.log("===================================");
}
/** * 删除文件后的回调函数 * @param Array */
function deleteFileCallback(delFiles){
// 数组里单个元素为Object,{index:在多图上传的索引号, name:文件名, size:文件大小}
// 其中size单位为Byte console.log("删除了如下文件:");
var obj;
for(var i = 0, iLen = delFiles.length; i < iLen; i++){
obj = delFiles[i];
console.log(obj.index, obj.name, obj.size);
}
console.log("===================================");}
/** * 开始上传单个文件的回调函数 * @param Object */
function startUploadCallback(file){
console.log("开始上传如下文件:");
console.log(file.name, file.size);
console.log("===================================");
}
/** * 单个文件上传完成的回调函数 * @param Object/String 服务端返回啥,参数就是啥 */
function uploadCompleteCallback(data){
console.log("上传成功", data);
console.log("===================================");
}
/** * 单个文件上传失败的回调函数 * @param Object/String 服务端返回啥,参数就是啥 */
function uploadErrorCallback(data){
console.log("上传失败", data);
console.log("===================================");
}
/** * 全部上传完成的回调函数 */
function allCompleteCallback(){
console.log("全部上传成功");
console.log("===================================");
}