custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel",
uploadButtonId : "btnUpload",
myFileListTarget : "idFileList"
},
custom_settings调用方法 this.customSettings.cancelButtonId
缩略图js
//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false); 替换this.startUpload();
完成文件入列队(fileQueued) →
完成选择文件(fileDialogComplete) → 开始上传文件(uploadStart) → 上传处理(uploadProgress) → 上传成功(uploadSuccess) → 上传完成(uploadComplete) →列队完成(queueComplete)
如上所示,单选文件顺序执行以上回调函数,需要注意的是选择多个文件,fileQueued、queueComplete只会执行一次,而fileDialogComplet...→ uploadComplete每个文件都执行一次。
use_query_string 该属性可选值为true和false,设置post_params是否以GET方式发送。如果为false,那么则以POST形式发送。
post_params 定义的是一个包含值对的object类型数据,每个文件上传的时候,其中的值对都会被一同发送到服务端。
prevent_swf_caching 默认值:true
(v2.2.0新增)该布尔值设置是否在Flash URL后添加一个随机值,用来防止浏览器缓存了该SWF影片。这是为了解决一些基于IE-engine的浏览器上的出现一个BUG。
button_action默认值:SWFUpload.BUTTON_ACTION.SELECT_FILES(多文件上传)
(v2.2.0新增) 设置Flash Button点击以后的动作。默认为SWFUpload.BUTTON_ACTION.SELECT_FILES,点击按钮将会打开多文件上传的对话框。 如果设置为SWFUpload.BUTTON_ACTION.SELECT_FILE,则为单文件上传。如果设置为 SWFUpload.BUTTON_ACTION.START_UPLOAD,则启动文件上传。
file_post_name : "Filedata" ,默认值: Filedata
该参数设置了POST信息中上传文件的name值(类似传统Form中设置了<input type="file" name="uploadImg"/>的name属性)。
<input id="btnCancel" type="button" value="取消全部" οnclick="swfu.cancelQueue();"/>
<input id="btnCancel" type="button" value="上传相片" οnclick="swfu.startUpload();"/>
File Object
File Object包含了一组可用的文件属性,很多处理事件都会传递一个File Object参数来访问该文件的相关属性。
{
id : string, // SWFUpload控制的文件的id,通过指定该id可启动此文件的上传、退出上传等
index : number, // 文件在选定文件队列(包括出错、退出、排队的文件)中的索引,getFile可使用此索引
name : string, // 文件名,不包括文件的路径。
size : number, // 文件字节数
type : string, // 客户端操作系统设置的文件类型
creationdate : Date, // 文件的创建时间
modificationdate : Date, // 文件的最后修改时间
filestatus : number // 文件的当前状态,对应的状态代码可查看SWFUpload.FILE_STATUS
}
Stats Object
该对象提供了上传队列的状态信息,访问实例的getStats方法可获取此对象。
该对象包括下面属性:
{
in_progress : number // 值为1或0,1表示当前有文件正在上传,0表示当前没有文件正在上传
files_queued : number // 当前上传队列中存在的文件数量
successful_uploads : number // 已经上传成功(uploadSuccess触发)的文件数量
upload_errors : number // 已经上传失败的文件数量 (不包括退出上传的文件)
upload_cancelled : number // 退出上传的文件数量
queue_errors : number // 入队失败(fileQueueError触发)的文件数量
}
所有这些属性的值都可以使用setStats方法来修改,除了in_progress 和 files_queued。
成功上传个数
this.getStats().successful_uploads
等待上传个数
swfUploadInstance.getStats().files_queued;
swfupload_loaded_handler
该事件函数是内部事件,因此不能被重写。当SWFupload实例化,加载的FLASH完成所有初始化操作时触发此事件。
file_dialog_complete_handler : fileDialogComplete
如果你希望在用户选择完文件后自动开始上传操作,那么可以将 this.startUpload() 操作放在这里 。如果想选择 后单独上传就不要加入 file_dialog_complete_handler : fileDialogComplete,或加入里面不能有this.startUpload()
function fileDialogComplete(numFilesSelected, numFilesQueued) { try { if (numFilesSelected > 0) { document.getElementById(this.customSettings.cancelButtonId).disabled = false; } /* I want auto start the upload and I can do that here */ if(this.settings.auto_upload){//是否要上传 this.startUpload(); } } catch (ex) { this.debug(ex); } }
支持一键批量上传
function uploadComplete(file) {
try {
/* I want the next upload to continue automatically so I'll call startUpload here */
if (this.getStats().files_queued > 0) {
//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false);
this.startUpload();
} else {
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setComplete();
progress.setStatus("All images received.");
progress.toggleCancel(false);
}
} catch (ex) {
this.debug(ex);
}
}
系统默认的js是swfupload.js,其他的都是自己开发修改的添加捕获事件函数如handlers.js。 file上传前的图片信息,serverData接收服务端字符串并转为数组类型,可以返回处理后的图片信息。后台处理程序必须 返回输出 字符串(json_encode转换或拼接等)
function uploadSuccess(file, serverData) { var isSuccess = (serverData.indexOf("successed")==0?true:false); try { if(isSuccess){//上传成功回调 var tr = document.getElementById(file.id); tr.style.color="green"; var bar = document.getElementById(file.id+"_bar"); bar.parentNode.innerHTML="上传成功"; var delObject = document.getElementById(file.id+"_del"); delObject.parentNode.innerHTML=" "; document.getElementById(this.customSettings.myFileListTarget+"Count").innerHTML=this.getStats().files_queued; //addImage("index.php?r=site/Thumb&id=" + serverData.substring(7)); //缩略图的显示 }else{ var tr = document.getElementById(file.id); tr.style.color="red"; var bar = document.getElementById(file.id+"_bar"); bar.parentNode.innerHTML="上传失败:"+serverData; var delObject = document.getElementById(file.id+"_del"); delObject.parentNode.innerHTML=" "; } } catch (ex) { this.debug(ex); } }
功能完全支持ie和firefox浏览器!同样也支持safari浏览器!
一般的WEB方式文件上传只能一个一个的进行上传,在某些应用上就显得很不人性化,客户们都希望能够1次选择很多文件,然后让系统把选择的文件全部上传。
有些朋友看到这里,就知道了,其实就是swfupload方法,具体信息可以访问swfupload官方网站:http://www.swfupload.org/
让我们先来看看客户端的界面效果图。(多选文件,批量上传,上传进度显示)
要做到图中的效果,其实很方便,看完下面的描述,相信大家都可以实现上图中的效果了。
说明:swfupload2中通过一个png图片与flash插件进行关联,可以修改images下的png图片来(如上图中的[选择文件]图片)自定义显示自己想要的图片样子(不要修改图片名字和格式)。
本文转载于:http://hudeyong926.iteye.com/blog/904373